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/