BOM系列第三篇之定時器應用(時鐘、倒計時、秒表和鬧鐘)

2019-11-20 09:13:27

字體：大中小

來源：轉載

供稿：網友

時鐘

　　最簡單的時鐘制作辦法是通過正則表達式的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去改變時間的作法并不可靠。更精確地做法，應該是與系統(tǒng)的運行時間作為參照，倒計時的時間變化與系統(tǒng)的時間變化同步，達到精確倒計時的效果　

　　[注意]此部分中，需要通過取模運算和除法運算進行時、分、秒的計算，詳細情況移步至此

<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;//原始系統(tǒng)時間值var timeOri = (new Date()).getTime();//現在所剩時間值var setNow;cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn(){//當前系統(tǒng)時間值var timeNow = (new Date()).getTime();//使系統(tǒng)時間的差值與設置時間的差值相等，來獲得正常的時間變化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】精確秒表

　　與倒計時類似，使用計時器的時間間隔作為時間變化的參照是不準確的。更精確的做法，應該是使用系統(tǒng)的時間變化作為秒表的變化的參照

<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表示初始的系統(tǒng)時間var ori;//dis表示當前運行時的秒數(動態(tài))var dis = 0;//last儲存暫停時的秒數(靜態(tài))var last = 0;reset.onclick = function(){history.go();}btn.onclick = function(){if(con === 'off'){set.setAttribute('disabled','disabled');con = 'on';btn.innerHTML = '暫停';//保留已經走過的秒數的系統(tǒng)時間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>