之前做過電商網站倒計時的效果，今天在倒計時的基礎上，把代碼修改了一下，改為計時器效果，實現了以下功能：
1.點擊“開始”后，按秒計時且“開始”文字變為“停止”；
2.點擊“停止”，計時停止，文字變為“開始”；
3.再點擊“開始”，計時器從0開始重新計時。
效果如圖所示：
“開始”和“停止”使用div標記實現，利用innerHTML改變其中的文字內容。
<div class="startTime">開始</div> <!-- 單擊開始，再單擊停止 -->
<div class="dispTime"></div> <!-- 顯示計時器的部分 -->
完整代碼如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>計時器</title><style type="text/css">.startTime {cursor: pointer;font-size: 30px;border: 1px solid #ccc;border-radius: 10px;width: 120px;margin: 10px auto;text-align: center;}.startTime:hover{background-color: aliceblue;}.dispTime {position: absolute;font-size: 60px;left: 50%;top: 30%;transform: translate(-50%, -50%);color:red;}</style></head><body><div class="startTime">開始</div> <!-- 單擊開始，再單擊停止 --><div class="dispTime"></div> <!-- 顯示計時器的部分 --><script>var startTime = document.querySelector('.startTime');var dispTime = document.querySelector('.dispTime');var times =0; //全局變量，從0開始計時，初始值為0var timer = null; //全局變量,初始值為空startTime.addEventListener('click', function(){if(this.innerHTML=='開始'){times = 0; //清除之前的時間，從0開始重新 計時timer = setInterval(countTime, 1000); //開啟定時器，前面不能加關鍵字var ,那會變成局部變量，定時器不能清除，不會從0開始this.innerHTML='停止'; //文本設置為停止}else{clearInterval(timer); //停止定時器this.innerHTML='開始'; //文本設置為開始}});//countTime()函數把總秒數顯示為時、分、秒效果function countTime() {var hh = parseInt(times / 60 / 60 );hh = hh < 10 ? '0' + hh : hh;var mm = parseInt(times / 60 % 60);mm = mm < 10 ? '0' + mm : mm;var ss = parseInt(times % 60);ss = ss < 10 ? '0' + ss : ss;dispTime.innerHTML= hh + ':' + mm + ':' + ss;times++;}</script></body>
</html>
在這段代碼中，剛開始實現的時候，沒有把timer設置為全局變量，而是在函數中使用了var關鍵字，這樣timer是局部變量，結果定時器無法停止。后來去掉關鍵字var，timer成為全局變量好了，于是最后把timer放在函數外，直接定義為全局變量，這樣程序可讀性好一些。
var timer = setInterval(countTime, 1000);
?)
