時鐘
最簡單的時鐘制作辦法是通過正則表達式的exec()方法,將時間對象的字符串中的時間部分截取出來,使用定時器刷新即可
<div id="myDiv"></div> <script> myDiv.innerHTML = /\d\d:\d\d:\d\d/.exec(new Date().toString())[0]; setInterval(function(){ myDiv.innerHTML = /\d\d:\d\d:\d\d/.exec(new Date().toString())[0]; },500); </script>
倒計時
【1】簡易倒計時
簡易倒計時就是每1s通過setInterval將設置的時間減去1來達到要求
<div id="myDiv"> <label for="set"><input type="number" id="set" step="1" value="0">秒</label> <button id="btn">確定</button> <button id="reset">重置</button> </div> <script> var timer; reset.onclick = function(){ history.go(); } btn.onclick = function(){ if(timer) return; set.setAttribute('disabled','disabled'); timer = setInterval(function(){ if(Number(set.value) === 0){ clearInterval(timer); timer = 0; set.removeAttribute('disabled'); return; } set.value = Number(set.value) - 1; },1000); } </script>
【2】精確倒計時
由定時器的運行機制,我們知道每間隔1000ms去改變時間的作法並不可靠。更精確地做法,應該是與系統的運行時間作為參照,倒計時的時間變化與系統的時間變化同步,達到精確倒計時的效果
[注意]此部分中,需要通過取模運算和除法運算進行時、分、秒的計算,詳細情況移步至此
<div id="myDiv"> <label for="hour"><input type="number" id="hour" min="0" max="23" step="1" value="0" />時</label> <label for="minute"><input type="number" id="minute" min="0" max="59" step="1" value="0" />分</label> <label for="second"><input type="number" id="second" min="0" max="23" step="1" value="0" />秒</label> <button id="btn">確定</button> <button id="reset">重置</button> </div> <script> var timer; //輸入限制 hour.onchange = function(){ if(Number(this.value) !== Number(this.value)) this.value = 0; if(this.value > 23) this.value = 23; if(this.value < 0) this.value = 0; } second.onchange = minute.onchange = function(){ if(Number(this.value) !== Number(this.value)) this.value = 0; if(this.value > 59) this.value = 59; if(this.value < 0) this.value = 0; } reset.onclick = function(){ history.go(); } btn.onclick = function(){ if(timer) return; for(var i = 0; i < 3; i++){ myDiv.getElementsByTagName('input')[i].setAttribute('disabled','disabled'); } //原始儲存值 var setOri = hour.value*3600 + minute.value*60 + second.value*1; //原始系統時間值 var timeOri = (new Date()).getTime(); //現在所剩時間值 var setNow; cancelAnimationFrame(timer); timer = requestAnimationFrame(function fn(){ //當前系統時間值 var timeNow = (new Date()).getTime(); //使系統時間的差值與設置時間的差值相等,來獲得正常的時間變化 setNow = setOri - Math.floor((timeNow - timeOri)/1000); hour.value = Math.floor((setNow%86400)/3600); minute.value = Math.floor((setNow%3600)/60); second.value = Math.floor(setNow%60); timer = requestAnimationFrame(fn); if(setNow==0){ cancelAnimationFrame(timer); timer = 0; btn.innerHTML = '計時結束'; for(var i = 0; i < 3; i++){ myDiv.getElementsByTagName('input')[i].removeAttribute('disabled'); } setTimeout(function(){ btn.innerHTML = '確定'; },1000) } }) } </script>
秒表
【1】簡易秒表
秒表與倒計時的思路相同,相比而言,更加簡單。每間隔100ms增加100ms即可
<div id="myDiv"> <label for="set"><input id="set" value="0"></label> <button id="btn">開始</button> <button id="reset">重置</button> </div> <script> var timer; var con = 'off'; var num = 0; reset.onclick = function(){ history.go(); } btn.onclick = function(){ if(con === 'off'){ set.setAttribute('disabled','disabled'); con = 'on'; btn.innerHTML = '暫停'; timer = setInterval(function(){ num+= 100; var minute = Math.floor(num/1000/60); var second = Math.floor(num/1000); var ms = Math.floor(num%1000)/100; set.value = minute + ' : ' + second + ' . ' + ms; },100); }else{ clearInterval(timer); con = 'off'; btn.innerHTML = '開始'; } } </script>
【2】精確秒表
與倒計時類似,使用計時器的時間間隔作為時間變化的參照是不准確的。更精確的做法,應該是使用系統的時間變化作為秒表的變化的參照
<div id="myDiv"> <label for="set"><input id="set" value="0"></label> <button id="btn">開始</button> <button id="reset">重置</button> </div> <script> var timer; var con = 'off'; //ori表示初始的系統時間 var ori; //dis表示當前運行時的秒數(動態) var dis = 0; //last儲存暫停時的秒數(靜態) var last = 0; reset.onclick = function(){ history.go(); } btn.onclick = function(){ if(con === 'off'){ set.setAttribute('disabled','disabled'); con = 'on'; btn.innerHTML = '暫停'; //保留已經走過的秒數的系統時間 ori = (new Date()).getTime() - last; timer = requestAnimationFrame(function fn(){ dis = (new Date()).getTime() - ori; cancelAnimationFrame(timer); timer = requestAnimationFrame(fn); var minute = Math.floor(dis/1000/60); var second = Math.floor(dis/1000); var ms = Math.floor(dis%1000); set.value = minute + ' : ' + second + ' . ' + ms; }); }else{ cancelAnimationFrame(timer); btn.innerHTML = '開始'; con = 'off'; last = dis; } } </script>
鬧鐘
鬧鐘其實就是在時鐘的基礎上增加一個預定時間設置,鬧鐘設置需要將設置時間轉換成距離1970年1月1日的毫秒數,然後再算出與當前時間的差值。隨著當前時間的不斷增加,當差值為0時,鬧鐘響起
<div id="myDiv"></div> <div id="con"> <label for="hour"><input type="number" id="hour" min="0" max="23" step="1" value="0" />時</label> <label for="minute"><input type="number" id="minute" min="0" max="59" step="1" value="0" />分</label> <label for="second"><input type="number" id="second" min="0" max="23" step="1" value="0" />秒</label> <button id="btn">確定</button> <button id="reset">重置</button> </div> <div id="show"></div> <script> var timer; //所剩時間 var dis; myDiv.innerHTML = /\d\d:\d\d:\d\d/.exec(new Date().toString())[0]; setInterval(function(){ myDiv.innerHTML = /\d\d:\d\d:\d\d/.exec(new Date().toString())[0]; },100); reset.onclick = function(){ history.go(); } btn.onclick = function(){ //原始儲存值 var setOri = hour.value*3600 + minute.value*60 + second.value*1; //原始值轉換為1970年的毫秒數 var setMs = +new Date(new Date().toDateString()) + setOri*1000; //如果設置的時間早於當前時間,則設置無效 if(setMs < +new Date()){ return; } for(var i = 0; i < 3; i++){ con.getElementsByTagName('input')[i].setAttribute('disabled','disabled'); } cancelAnimationFrame(timer); timer = requestAnimationFrame(function fn(){ //算出設置時間與當前時間的差值 dis = Math.ceil((setMs - (new Date()).getTime())/1000); var showHour = Math.floor((dis%86400)/3600); var showMinute = Math.floor((dis%3600)/60); var showSecond = Math.floor(dis%60); timer = requestAnimationFrame(fn); show.innerHTML = '距離預定時間還有 ' + showHour + '小時 ' + showMinute + '分 ' + showSecond + '秒'; //當差值為0時,時間到 if(dis==0){ cancelAnimationFrame(timer); btn.innerHTML = '時間到了'; for(var i = 0; i < 3; i++){ con.getElementsByTagName('input')[i].removeAttribute('disabled'); } timer = setTimeout(function(){ btn.innerHTML = '確定'; },1000) } }); } </script>
最後
作為定時器來說,最麻煩的地方是定時器管理。如果,定時器只開啟不關閉,則會造成定時器疊加效果,使得運行越來越快。所以,先關閉再啟用定時器是一個好習慣。
以上所述是小編給大家介紹的BOM系列第三篇之定時器應用(時鐘、倒計時、秒表和鬧鐘),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!