深入理解定时器系列第三篇——定时器应用(时钟、倒计时、秒表和闹钟)

前面的话

　　本文属于定时器的应用部分，分别用于实现与时间相关的四个应用，包括时钟、倒计时、秒表和闹钟。与时间相关需要用到时间和日期对象Date，详细情况移步至此

 

时钟

　　最简单的时钟制作办法是通过正则表达式的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>

style="width: 100%; height: 40px;" src="https://demo.xiaohuochai.site/js/timerApp/t1.html" frameborder="0" width="320" height="240">

 

倒计时

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

style="line-height: 1.5; width: 100%; height: 40px;" src="https://demo.xiaohuochai.site/js/timerApp/t2.html" frameborder="0" width="320" height="240">

【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