JavaScript-setInterval-周期性行定时器-倒计时
2016-12-29 06:41
337 查看
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <h1>距离放学还有<span id="time"></span></h1> 9 <button onclick="stop(this)">||</button> 10 <script> 11 //定义任务函数,计算now到target的时间差 12 function task(){ 13 //定义目标时间end:2016年9月13日 12:00 14 var end=new Date("2016/12/28 23:00"); 15 //获得当前时间now 16 var now=new Date(); 17 //获得时间差(s):end-now/1000 18 var s=Math.round((end-now)/1000); 19 //求小时(h): 20 var h=Math.floor(s/3600); 21 //如果h<10,就改为0+h 22 h<10&&(h="0"+h); 23 //求分钟(m): 24 var m=Math.floor(s%3600/60); 25 //如果m<10,就改为0+m 26 m<10&&(m="0"+m); 27 //求秒(s): 28 s%=60; 29 //如果s<10,就改为0+s 30 s<10&&(s="0"+h); 31 //找到id为time的span,设置其内容为:h:m:s 32 document.getElementById("time").innerHTML=h+":"+m+":"+s; 33 } 34 task(); 35 //启动定时器 36 var timer=setInterval(task,1000); 37 //停止定时器 38 function stop(btn){ 39 //如果btn的内容为|| 40 if(btn.innerHTML=="||"){ 41 //停止定时器 42 clearInterval(timer); 43 //修改btn的内容为|> 44 btn.innerHTML="|>"} 45 //否则 46 else{ 47 //启动定时器 48 timer=setInterval(task,1000); 49 //修改btn的内容为|| 50 btn.innerHTML="||"; 51 } 52 } 53 </script> 54 55 </body> 56 </html>
相关文章推荐
- 原生JavaScript利用setInterval的一个简单开始暂停的定时器
- Javascript 笔记与总结(2-13)定时器 setTimeout 和 setInterval
- 【JavaScript】使用定时器实现Js的延期执行或重复执行setTimeout,setInterval
- javascript中SetInterval与setTimeout的定时器用法
- Javascript 中的定时器: setTimeout() 和 setInterval()
- 分享一个自己利用javascript中的window.setInterval()定时器实现页面背景图片淡入淡出效果
- 理解javascript定时器中的setTimeout与setInterval
- 分享一个自己利用javascript中的window.setInterval()定时器实现页面背景图片变换的特效(同时淡入淡出效果)
- JavaScript中的定时器(setTimeout、setInterval) ( 2008-06-04 17:06:08| 分类: jsp+html+js+Ajax)
- javascript 定时器. setInterval 用法
- javascript 定时器. setInterval 用法补充1
- 【javascript】【定时器】【setTimeout, setInterval】【优化】
- Javascript的setTimeOut()和setInterval()的定时器用法
- 【JavaScript】使用定时器实现Js的延期执行或重复执行setTimeout,setInterval
- 【JavaScript】使用定时器实现Js的延期执行或重复执行setTimeout,setInterval
- Javascript中setTimeOut和setInterval的定时器用法
- 理解JavaScript定时器:setTimeout和setInterval
- 使用javascript定时器定时调用一个function,不能用SetTimer,要使用setInterval
- JavaScript 高级课程之定时器setInterval,clearInterval