快捷導(dǎo)航

BOM系列第三篇之定時(shí)器應(yīng)用(時(shí)鐘、倒計(jì)時(shí)、秒表和鬧鐘)

更新時(shí)間：2016年08月17日 10:03:41 作者：小火柴的藍(lán)色理想

這篇文章主要介紹了BOM系列第三篇之定時(shí)器應(yīng)用(時(shí)鐘、倒計(jì)時(shí)、秒表和鬧鐘) 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

時(shí)鐘

　　最簡(jiǎn)單的時(shí)鐘制作辦法是通過正則表達(dá)式的exec()方法，將時(shí)間對(duì)象的字符串中的時(shí)間部分截取出來，使用定時(shí)器刷新即可

<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>

倒計(jì)時(shí)

【1】簡(jiǎn)易倒計(jì)時(shí)

　　簡(jiǎn)易倒計(jì)時(shí)就是每1s通過setInterval將設(shè)置的時(shí)間減去1來達(dá)到要求

<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】精確倒計(jì)時(shí)

　　由定時(shí)器的運(yùn)行機(jī)制，我們知道每間隔1000ms去改變時(shí)間的作法并不可靠。更精確地做法，應(yīng)該是與系統(tǒng)的運(yùn)行時(shí)間作為參照，倒計(jì)時(shí)的時(shí)間變化與系統(tǒng)的時(shí)間變化同步，達(dá)到精確倒計(jì)時(shí)的效果　

　　[注意]此部分中，需要通過取模運(yùn)算和除法運(yùn)算進(jìn)行時(shí)、分、秒的計(jì)算，詳細(xì)情況移步至此

<div id="myDiv">
<label for="hour"><input type="number" id="hour" min="0" max="23" step="1" value="0" />時(shí)</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');
}
//原始儲(chǔ)存值
var setOri = hour.value*3600 + minute.value*60 + second.value*1;
//原始系統(tǒng)時(shí)間值
var timeOri = (new Date()).getTime();
//現(xiàn)在所剩時(shí)間值
var setNow;
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
//當(dāng)前系統(tǒng)時(shí)間值
var timeNow = (new Date()).getTime();
//使系統(tǒng)時(shí)間的差值與設(shè)置時(shí)間的差值相等，來獲得正常的時(shí)間變化
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 = '計(jì)時(shí)結(jié)束';
for(var i = 0; i < 3; i++){
myDiv.getElementsByTagName('input')[i].removeAttribute('disabled');
}
setTimeout(function(){
btn.innerHTML = '確定';
},1000) 
}
})
}
</script>

秒表

【1】簡(jiǎn)易秒表

　　秒表與倒計(jì)時(shí)的思路相同，相比而言，更加簡(jiǎn)單。每間隔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】精確秒表

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

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

鬧鐘

　　鬧鐘其實(shí)就是在時(shí)鐘的基礎(chǔ)上增加一個(gè)預(yù)定時(shí)間設(shè)置，鬧鐘設(shè)置需要將設(shè)置時(shí)間轉(zhuǎn)換成距離1970年1月1日的毫秒數(shù)，然后再算出與當(dāng)前時(shí)間的差值。隨著當(dāng)前時(shí)間的不斷增加，當(dāng)差值為0時(shí)，鬧鐘響起

<div id="myDiv"></div>
<div id="con">
<label for="hour"><input type="number" id="hour" min="0" max="23" step="1" value="0" />時(shí)</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;
//所剩時(shí)間
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(){
//原始儲(chǔ)存值
var setOri = hour.value*3600 + minute.value*60 + second.value*1;
//原始值轉(zhuǎn)換為1970年的毫秒數(shù)
var setMs = +new Date(new Date().toDateString()) + setOri*1000;
//如果設(shè)置的時(shí)間早于當(dāng)前時(shí)間，則設(shè)置無效
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(){
//算出設(shè)置時(shí)間與當(dāng)前時(shí)間的差值
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 = '距離預(yù)定時(shí)間還有 ' + showHour + '小時(shí) ' + showMinute + '分 ' + showSecond + '秒';
//當(dāng)差值為0時(shí)，時(shí)間到
if(dis==0){
cancelAnimationFrame(timer);
btn.innerHTML = '時(shí)間到了';
for(var i = 0; i < 3; i++){
con.getElementsByTagName('input')[i].removeAttribute('disabled');
}
timer = setTimeout(function(){
btn.innerHTML = '確定';
},1000) 
}
});
}
</script>

最后

作為定時(shí)器來說，最麻煩的地方是定時(shí)器管理。如果，定時(shí)器只開啟不關(guān)閉，則會(huì)造成定時(shí)器疊加效果，使得運(yùn)行越來越快。所以，先關(guān)閉再啟用定時(shí)器是一個(gè)好習(xí)慣。

以上所述是小編給大家介紹的BOM系列第三篇之定時(shí)器應(yīng)用(時(shí)鐘、倒計(jì)時(shí)、秒表和鬧鐘)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: