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>
