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 作用域使用说明
Aug 13 Javascript
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
Nuxt的路由动画效果案例
Nov 06 Javascript
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程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
Python urlopen 使用小示例
2008/09/06 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
Python生成器generator用法示例
2018/08/10 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
小松树教学反思
2014/02/11 职场文书
节水倡议书范文
2014/04/15 职场文书
安全技术说明书
2014/05/09 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
监理中标通知书
2015/04/16 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
学困生转化工作总结
2015/08/13 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript