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 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
js实现二级导航功能
Mar 03 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
node中的cookie的具体使用
Sep 13 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使用pack处理二进制文件的方法
2014/07/03 PHP
PHP文件操作实例总结
2016/09/27 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
three.js实现圆柱体
2018/12/30 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
vue编写简单的购物车功能
2021/01/08 Vue.js
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
Python多线程编程简单介绍
2015/04/13 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
python实现泊松图像融合
2018/07/26 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
python中doctest库实例用法
2020/12/31 Python
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
水果连锁超市创业计划书
2014/01/24 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
观后感的写法
2015/06/19 职场文书
班主任工作总结范文
2015/08/13 职场文书