0x01定时器基础

本文属于定时器的应用部分，分别用于实现与时间相关的四个应用，包括时钟、倒计时、秒表和闹钟。与时间相关需要用到时间和日期对象Date，可自行查阅。

开启定时器：setInterval(函数，时间)     //间隔型function  show(){alert('a');}setInterval(show,1000);     //每隔1000毫秒执行一次show函数setTiomeout     //延时型function  show(){alert('a');}setTiomeout (show,1000);     //延时1000毫秒执行一次show函数，只执行一次关闭定时器：clearIntervalclearTimeout

0x02时钟

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

0x03倒计时

简易倒计时

　　简易倒计时就是每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>

0x04精确倒计时

由定时器的运行机制，我们知道每间隔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>

0x05秒表

简易秒表

　　秒表与倒计时的思路相同，相比而言，更加简单。每间隔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>

0x06闹钟

闹钟其实就是在时钟的基础上增加一个预定时间设置，闹钟设置需要将设置时间转换成距离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>

作为定时器来说，最麻烦的地方是定时器管理。如果，定时器只开启不关闭，则会造成定时器叠加效果，使得运行越来越快。所以，先关闭再启用定时器是一个好习惯