标签 秒表计时器 下的文章

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


先来了解下setInterval() 方法

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

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

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

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.

以下是例子:

<!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>