<div> <label for="set"><input value="0"></label> <button>开始</button> <button>重置</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></div> <div> <label for="hour"><input type="number" min="0" max="23" step="1" value="0" />时</label> <label for="minute"><input type="number" min="0" max="59" step="1" value="0" />分</label> <label for="second"><input type="number" min="0" max="23" step="1" value="0" />秒</label> <button>确定</button> <button>重置</button> </div> <div></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>
最后
作为定时器来说，最麻烦的地方是定时器管理。如果，定时器只开启不关闭，则会造成定时器叠加效果，使得运行越来越快。所以，先关闭再启用定时器是一个好习惯。
以上所述是小编给大家介绍的BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: