js實現簡單的秒錶
阿新 • • 發佈:2020-01-17
本文例項為大家分享了js實現簡單的秒錶的具體程式碼,供大家參考,具體內容如下
描述:
實現一個簡單的秒錶,點選啟動按鈕時開始計時,隨後啟動按鈕變為暫停,
點選暫停暫停計時,點選復位回到最初始狀態。
效果:
程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #showTime { width: 300px; height: 60px; font-size: 60px; line-height: 60px; } </style> </head> <body> <div> <div id="showTime">00:00:00</div> <button id="startBn">啟動</button> <button id="restBn">復位</button> </div> <script> //—————— var time,showTime,startBn,restBn,pauseDate; //布林開關 var bool=false; //暫停的累計時間 var pauseTime=0; init(); function init() { showTime=document.getElementById("showTime"); startBn=document.getElementById("startBn"); restBn=document.getElementById("restBn"); startBn.addEventListener("click",clickHandler);//開始按鈕 ~ 暫停按鈕 restBn.addEventListener("click",clickHandler);//復位按鈕 setInterval(animation,16); } //轉化時間函式 function animation() { if(!bool) return; //前時間減去上次開啟時間減去暫停累計時間 var times=new Date().getTime()-time-pauseTime; var minutes=Math.floor(times/60000);//毫秒轉化為分鐘 var seconds=Math.floor((times-minutes*60000)/1000);//已知分鐘 將time減去分鐘 除去1000得出 秒 var ms=Math.floor((times-minutes*60000-seconds*1000)/10);// showTime.innerHTML= (minutes<10 ? "0" +minutes : minutes)+":" +(seconds<10 ? "0"+seconds :seconds)+":" +(ms<10 ? "0"+ms : ms); } //點選時的事件 function clickHandler(e) { e= e || window.event; if(this===startBn){ bool=!bool; if(bool){ this.innerHTML="暫停"; //如果我們上一次暫停時間是空,表示沒有暫停過,因此,直接返回0 //如果上次的暫停時間是有值得,用當前毫秒數減去上次的毫秒數,這樣就會得到暫停時間 pauseTime+=(!pauseDate ? 0 : new Date().getTime()-pauseDate); if(time) return; time=new Date().getTime(); return;//是為bool判斷跳出 } this.innerHTML="啟動"; pauseDate=new Date().getTime(); return;//是為this是否等於startBn判斷跳出 } startBn.innerHTML="啟動"; pauseTime=0; pauseDate=null; bool=false; time=0; showTime.innerHTML="00:00:00"; } </script> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。