计时器的功能就是以秒为单位分别累加计时。其中提供了三个功能。计时：时间归零并开始计时；暂停：暂停当前计时器；继续：对暂停的计时器在当前时间上继续计时。时间格式是X时X分X秒。
这次先提供预览图，然后讲解思路，代码放在后面。换换之前的步骤看看哪种效果好一点。下面提供效果图，逻辑思路以及代码。
预览图：
逻辑思路：
对页面进行布局就不讲了。直接讲逻辑。
1、首先定义了变量usedtime用来存储计时器总共计时的时间，变量t用来接收计时函数返回的计时器。
2、然后定义了继续方法proceed()对usedtime进行累加，其中用到了setTimeout(“fun",time)这个函数，该函数将会在time毫秒之后执行函数fun。其中clearTimeout(t)表示暂停计时器t。暂停方法stop()直接调用clearTimeout(t)即可。重新计时方法begin()将usedtime赋值为初始值，然后调用了继续方法proceed()。
3、最后在三个按钮上面的onclick事件上面分别调用这三个方法即可。
其中有个需要注意的地方。大家应该发现了，每个方法中都执行了一遍clearTimeout(t)。这是为什么呢？因为如果不执行这句代码而直接执行这句代码t = setTimeout("proceed()",1000);就会重新生成一个计时器，从而计时器的单位时间就不是1秒了，而是触发了几次proceed()，一秒内就会加几秒。最后的结果就是点击一次计时或者继续按钮，一秒内计时器加的数就会多一个，比如我点击7次继续，计时器一秒加的数就是7，而不是我们想要的加1。关于这一点，各位感兴趣的朋友可以把begin()和proceed()方法中的clearTimeout(t)去掉，看看最后的现象。
据此，希望各位朋友要知道测试的重要性。很少有人能把机器的逻辑理解通透，不做测试是很难有把握保证自己的程序不会出现bug的。上面的代码我会加上clearTimeout(t)就是在自己测试的时候发现了这个问题。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>计时器</title>
<script type="text/javascript">
var usedtime = -1; //计时已经花费的时间，单位秒
var t;//计时器对象
function begin(){ //计时开始
usedtime = -1;
clearTimeout(t);
proceed();
}
function proceed(){ //继续
usedtime++;
clearTimeout(t);
t = setTimeout("proceed()",1000);
document.getElementById("showTime").innerHTML=Math.floor(usedtime/3600)+"时"+(Math.floor(usedtime/60)%60)+"分"+(usedtime%60)+"秒";
}
function stop(){ //暂停
clearTimeout(t);
}
</script>
</head>
<body>
<div style="position: absolute;top: 50px;left: 100px;font-size: 24px;background-color: #436EEE;padding: 5px;">
<div style="color: black;float: left;">计时器：</div>
<div id="showTime" style="color: white;float: left;">0时0分0秒</div>
</div>
<div style="position: absolute;top: 90px;left: 100px;font-size: 24px;padding: 5px;">
<input type="button" value="计时" onclick="begin()"/>
<input type="button" value="暂停" onclick="stop()"/>
<input type="button" value="继续" onclick="proceed()"/>
</div>
</body>
</html>
![layui框架学习（13：辅助元素）[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)