BOM系列第三篇之定时器应用（时钟、倒计时、秒表和闹钟）

时钟

最简单的时钟制作办法是通过正则表达式的exec（）方法，将时间对象的字符串中的时间部分截取出来，使用定时器刷新即可

<div id="myDiv"></div><script>myDiv.innerHTML = /dd:dd:dd/.exec（new Date（）.toString（））[0];setInterval（function（）{myDiv.innerHTML = /dd:dd:dd/.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 = /dd:dd:dd/.exec（new Date（）.toString（））[0];setInterval（function（）{myDiv.innerHTML = /dd:dd:dd/.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系列第三篇之定时器应用（时钟、倒计时、秒表和闹钟），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！