先介紹兩個函數:
- setTimeout() 方法用於在指定的毫秒數后調用函數或計算表達式。
- clearTimeout() 方法可取消由 setTimeout() 方法設置的定時操作。如果方法還未被執行,我們可以使用 clearTimeout() 來阻止它。
<!DOCTYPE html> <html> <head> <title>js實現計數器</title> </head> <body> <button onclick="startCount()">開始計數!</button> <input type="text" id="counter"> <button onclick="stopCount()">停止計數!</button> <p> 點擊 "開始計數!" 按鈕開始執行計數程序。輸入框從 0 開始計算。 點擊 "停止計數!" 按鈕停止后,可以再次點擊點擊 "開始計數!" 按鈕會接着計數。 </p> <script> var cnt = 0; var t; var timer_is_on = 0; function timedCount() { document.getElementById("counter").value = cnt; cnt = cnt + 1; t = setTimeout(function(){ timedCount() }, 1000); } function startCount() { if (!timer_is_on) { timer_is_on = 1; timedCount(); } } function stopCount() { clearTimeout(t); timer_is_on = 0; } </script> </body> </html>