BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
时钟
最简单的时钟制作办法是通过正则表达式的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>
倒计时
【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 = /\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系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- 这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
JoshChen_web格式编码UTF8-无BOM的小细节分析
但是在开发的过程中,发现一个小细节的问题,必须要打开F12才能看到的,原来,在head头部里面的所有引用的东西以及title等等,全部都跑到body里面去了,苦思冥想,百度、google全找不到答案。...2013-10-02- 在淘宝等购物网站,我们都会看到一个发送短信倒计时的按钮,究竟是如何实现的呢?下面小编通过本篇文章给大家分享一段代码关于js实现手机短信按钮倒计时,需要的朋友参考下...2016-01-02
- 这篇文章主要介绍了JS实现倒计时,精确到天数、时、分、秒,还为大家分享了parseInt() 函数的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-11-22
- 这篇文章主要介绍了jquery实现倒计时效果,根据设计一个游戏引出的倒计时功能,需要的朋友可以参考下...2015-12-16
- 这篇文章主要介绍了JQuery实现的按钮倒计时效果,涉及jQuery结合时间函数动态修改按钮属性的相关技巧,需要的朋友可以参考下...2015-12-25
- 这篇文章主要介绍了BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟) 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-08-24
BOM系列第二篇之定时器requestAnimationFrame
这篇文章主要介绍了BOM系列第二篇之定时器requestAnimationFrame 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-08-24- 本文给大家介绍了如何使用javascript实现倒计时跳转到其他页面的方法以及实现原理,非常的简单实用,有需要的小伙伴可以参考下。...2016-01-20
- 本篇文章主要介绍了ionic+AngularJs实现获取验证码倒计时按钮,具有一定的参考价值,有兴趣的可以了解一下。...2017-04-27
- 这篇文章主要介绍了js点击按钮在倒计时后才可以点击的效果,需要的朋友可以参考下...2015-12-21
- 现如今做电商网站必不可少的一个效果就是限时抢购,这也是各大电商网站的一种促销手段。如何实现倒计时限时抢购,本文为大家分享了javascript实现倒计时限时抢购的的相关代码,感兴趣的小伙伴们可以参考一下...2016-04-19
理解javascript定时器中的setTimeout与setInterval
这篇文章主要帮助大家学习理解javascript定时器中的setTimeout与setInterval,从实例出发进行深入探讨,感兴趣的小伙伴们可以参考一下...2016-02-26BOM系列第一篇之定时器setTimeout和setInterval
这篇文章主要介绍了BOM系列第一篇之定时器setTimeout和setInterval 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-08-24- 这篇文章主要为大家详细介绍了Javascript实现倒计时时差效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-22
- 这篇文章主要介绍了php实现倒计时效果,写了一个考试系统剩余时间倒计时的显示代码和大家一起探讨,需要的朋友可以参考下...2015-12-21
- 这篇文章主要介绍了js简单倒计时实现代码,涉及JavaScript时间与日期的相关运算技巧,需要的朋友可以参考下...2016-05-04
- 在日常开发的时候经常遇到关于倒计时的需求,下面这篇文章就给主要介绍了JavaScript利用Date实现倒计时效果的方法示例,文中主要实现了倒计时和倒计时结束抢购的按钮才可以被点击的效果,有需要的朋友可以参考借鉴。...2017-01-16
- 这篇文章主要为大家详细介绍了angular2倒计时组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-16
- 本文主要介绍了原生js实现倒计时(多种格式调用)的方法,具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-16