JavaScript實現簡單計時器
阿新 • • 發佈:2021-06-23
本文例項為www.cppcns.com大家分享了javascript實現簡單計時器的具體程式碼,供大家參考,具體內容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>計時器</title> <style> .bigDiv { margin: 50px auto; width: 200px; height: 200px; background-color: lightskyblue; border-radius: 10px; } #showNum { width: 200px; height: 20px; www.cppcns.combackground-color: orange; text-align-all: center; border-radius: 5px; } </style> </head> <body> <div class="bigDiv"> <h2 align="center">計時器</h2> <div id="showNum" align="center"> 0 </div> <br> <br> <div class="butDiv">&nbwww.cppcns.comsp    <button type="button" id="start">開始</button>   <button type="button" id="stop">停止</button>   <button type="button" id="reset">復位</button>   </div> </div> <script> //定義顯示的時間 let int = null; /** * 開始 單擊事件 */ document.getElementById("start").addEventListener('click',function () { if (int == null) { //設定定時器 //每隔引數二毫秒執行一次引數一 int = setInterval(startNum,1000); } }); /** * 停止 單擊事件 */ document.getElementById("stop").addEventListener('clicktcrtV',function () { //清除定時器, clearInterval(int); int = null; }); /** * 復位 單擊事件 */ letcrtVt num = 0; document.getElementById("reset").addEventListener('click',function () { if (int == null) { num = 0; //將時間變成0 document.getElementById("showNum").innerHTML = num; } }); function startNum() { num++; //持續改變時間 document.getElementById("showNum").innerHTML = num; } </script> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。