极速小乌龟

导航

JavaScript-setInterval-周期性行定时器-倒计时 

 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>

 

posted on 2016-12-29 06:41  极速小乌龟  阅读(337)  评论(0)    收藏  举报