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


Posted in Javascript onAugust 17, 2016

时钟

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

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

倒计时

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

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

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

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

秒表

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

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

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

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

闹钟

闹钟其实就是在时钟的基础上增加一个预定时间设置,闹钟设置需要将设置时间转换成距离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系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)

最后

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

以上所述是小编给大家介绍的BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript innerHTML使用分析
Dec 03 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
JQuery中clone方法复制节点
May 18 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
vue之数据交互实例代码
Jun 20 Javascript
js实现本地时间同步功能
Aug 26 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
AngularJS Ajax详解及示例代码
Aug 17 #Javascript
AngularJS包括详解及示例代码
Aug 17 #Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 #Javascript
AngularJS表单详解及示例代码
Aug 17 #Javascript
AngularJS模块详解及示例代码
Aug 17 #Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 #Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 #Javascript
You might like
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
js 函数性能比较方法
2020/08/24 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
实习教师自我鉴定
2013/12/09 职场文书
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
生日宴会策划方案
2014/06/03 职场文书
新党章心得体会
2014/09/04 职场文书
七年级数学教学反思
2016/02/17 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书