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>