js动态计时器,秒表计时器

先来了解下setInterval() 方法

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval(“clock()”,1000); //每隔1秒则调用clock()函数一次。

接下来我们看下clock()函数的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function clock()
  {
var t;
t=parseInt(document.getElementById("clock").value)+1;
//document.getElementById("clock").value)的意思是获取id为clock元素的value值
//parseInt()函数是将返回的数据转换成int类型
//整句话的意思,就是将id为clock的元素值加1
 
document.getElementById("clock").value = t;
//改变id为clock的元素值
 
 t=formatSeconds(t);
//调用formatSeconds()函数,这个函数就是将秒钟换成时分秒的形式
 
document.getElementById("clocktime").innerHTML=t;
//将id为clocktime的元素的内容赋值为t,即前一秒加1
  }

整个js特别好理解,就是每个1秒就运行clock()函数一次,将原来的秒数加1.

以下是例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
 
<body>
<center>
<input type="hidden" id="clock" value="0">
<span id="clocktime"></span>
<script language=javascript>
function clock()
  {
	  var t;
	  t=parseInt(document.getElementById("clock").value)+1;
	  document.getElementById("clock").value = t;
	  t=formatSeconds(t);
	  document.getElementById("clocktime").innerHTML=t;
  } 
 
function formatSeconds(value) {
var ctime = Number(value);
        var ctime1 = 0;
        var ctime2 = 0;
        if(ctime > 60) {
        	ctime1 = Number(ctime/60);
        	ctime = Number(ctime%60);
        	if(ctime1 > 60) {
        		ctime2 = Number(ctime1/60);
        		ctime1 = Number(ctime%60);
        	}
        }
        var result = ""+ctime+"秒";
        if(ctime1 > 0) {
        	result = ""+parseInt(ctime1)+"分"+result;
        }
        if(ctime2 > 0) {
        	result = ""+parseInt(ctime2)+"小时"+result;
        }
        return result;
}
setInterval("clock()",1000);
</script>
</body>
</center>
</html>

本文固定链接: https://www.apieye.com/580.html | APIEYE

该日志由 Jazzy 于2013年04月12日发表在 html, JavaScript 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: js动态计时器,秒表计时器 | APIEYE
关键字: ,

js动态计时器,秒表计时器:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!