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 相关文章推荐
js正文内容高亮效果的实现方法
Jun 30 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
Node.js API详解之 module模块用法实例分析
May 13 Javascript
vue-cropper组件实现图片切割上传
May 27 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中文分词系统SCWS安装和使用实例
2014/04/11 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
JavaScript 变量基础知识
2009/11/07 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
Python字符串拼接的几种方法整理
2017/08/02 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
python版本单链表实现代码
2018/09/28 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
python中re模块知识点总结
2021/01/17 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
2015年银行工作总结范文
2015/04/01 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书