計時器的功能就是以秒為機關分别累加計時。其中提供了三個功能。計時：時間歸零并開始計時；暫停：暫停目前計時器；繼續：對暫停的計時器在目前時間上繼續計時。時間格式是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=)