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 相关文章推荐
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
了解JavaScript中的选择器
May 24 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 Javascript
详解Vue数据驱动原理
Nov 17 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
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 strtotime 函数UNIX时间戳
2009/01/14 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
用console.table()调试javascript
2014/09/04 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
建筑设计学生的自我评价
2014/01/16 职场文书
读书演讲主持词
2014/03/18 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
通信工程求职信
2014/07/16 职场文书
管理工程专业求职信
2014/08/10 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
初中语文教学随笔
2015/08/15 职场文书