标签：
javascript实现的秒表效果代码:
关于秒表效果，自然不会陌生，下面将分析一个实例来介绍一下如何通过原生javascript实现此效果。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>javascript实现的秒表效果-蚂蚁部落</title> <style type="text/css"> #container{ margin:0 auto; margin-top:10%; width:200px; } #timer{ border:red double 1px; width:180px; height:76px; line-height:76px; font-size:32pt; color:green; } input{ width:87px; } </style> <script type="text/javascript"> window.onload=function(){ var ctrl=document.getElementById("ctrl"); var myreset=document.getElementById("myreset"); var timer=document.getElementById("timer"); init(timer,ctrl); myreset.setAttribute("onclick", "init(timer,ctrl)"); } var hour, minute, second; var t; var init=function(theTimer,TheCtrl){ theTimer.innerHTML="00:00:00"; hour=minute=second=0; TheCtrl.setAttribute("value", "开始"); TheCtrl.setAttribute("onclick", "startit()"); clearTimeout(t); } function startit(){ second++; if(second>=60){ second = 0; minute++; } if(minute>=60){ minute = 0; hour++; } timer.innerHTML=j(hour)+":"+j(minute)+":"+j(second); ctrl.setAttribute("value", "暂停/停止"); ctrl.setAttribute("onclick", "pause()"); t=setTimeout("startit()", 1000); } var j = function(arg){ return arg>=10 ? arg : "0" + arg; } var pause = function(){ clearTimeout(t); ctrl.setAttribute("onclick", "startit()"); ctrl.setAttribute("value", "继续"); } </script> </head> <body> <div id="container"> <div id="timer"></div> <input type="button" id="ctrl" /> <input type="reset" id="myreset"/> </div> </body> </html>
以上代码实现了秒表效果，下面就介绍一下此特效的实现过程：
一.实现原理:
原理比较简单，就是使用setTimeout()函数不断的递归调用startit()函数，此函数可以每运行一次增加一秒，然后判断秒、分是否大于60，如果大于则按照时间法则进行进位或者清零，最后再将当前时间值写入timer中，这样就实现了秒表效果，关于开始，暂停这里就不多介绍了，可以看参考代码注释。
二.代码注释:
1.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
2.var ctrl=document.getElementById("ctrl")，获取id属性值为ctrl的对象元素。
3.var myreset=document.getElementById("myreset")，获取id属性值为myreset的对象元素。
4.var timer=document.getElementById("timer")，获取id属性值为timer的对象元素。
5.init(timer,ctrl)，调用函数并传递参数执行。
6.myreset.setAttribute("onclick", "init(timer,ctrl)")，为重置按钮注册事件处理函数。
7.var hour, minute, second，声明三个变量，分别用来表示时间的小时、分钟和秒。
8.var t，声明一个变量用来存储setTimeout()函数的返回值。
9.var init=function(theTimer,TheCtrl){}，声明一个函数用来初始化秒表效果，第一个参数是显示秒表效果的元素对象，第二个参数是开始按钮对象。
10.theTimer.innerHTML="00:00:00"，将theTimer元素的内容设置为="00:00:00"。
11.hour=minute=second=0，将三个变量的值分别设置为0。
12.TheCtrl.setAttribute("value", "开始")，将开始按钮的value属性值设置为“开始”。
13.TheCtrl.setAttribute("onclick", "startit()")，为开始按钮注册onclick事件处理函数。
14.clearTimeout(t)，停止setTimeout()函数的执行。
15.function startit(){}，声明一个函数。
16.second++，秒加1.
17.if(second>=60)，如果秒数大于等于60，则将second清零，并将minute加1。
18.timer.innerHTML=j(hour)+":"+j(minute)+":"+j(second)，将timer的内容设置为当前的秒表值。
19.ctrl.setAttribute("value", "暂停/停止")，将开始按钮的value属性值设置为暂停/停止"。
20.ctrl.setAttribute("onclick", "pause()")，为开始按钮注册onclick事件处理函数。
21.t=setTimeout("startit()",1000)，一秒后，再次调用startit()函数。
22.var j=function(arg){return arg>=10 ? arg : "0" + arg;}，用于判断当前时间各单位的数值是否大于等于10，如果大于在使用原数值，如果不小于10，则在前面添加0，这是使用了三元运算符。
23.var pause = function(){}，声明一个函数用于暂停秒表。
24.clearTimeout(t)，停止setTimeout()函数的运行。
25.ctrl.setAttribute("onclick", "startit()")，为开始按钮注册onclick事件处理函数。
26.ctrl.setAttribute("value", "继续")，将开始按钮的value属性值设置为“继续”。
三.相关阅读:
1.setAttribute()函数可以参阅setAttribute()函数的用法详解一章节。
2.setTimeout()函数可以参阅window对象的setTimeout()方法一章节。
3.关于三元运算符可以参阅三元运算符用法详解一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8524
更多内容可以参阅:http://www.softwhy.com/javascript/
标签：
原文地址：http://www.cnblogs.com/zhadanren/p/5088304.html
