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

时间：2023-12-25 16:02:37
 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <h1>距离放学还有<span id="time"></span></h1>

 <button onclick="stop(this)">||</button>

 <script>

     //定义任务函数,计算now到target的时间差

     function task(){

         //定义目标时间end:2016年9月13日 12:00

         var end=new Date("2016/12/28 23:00");

         //获得当前时间now

         var now=new Date();

         //获得时间差(s):end-now/1000

         var s=Math.round((end-now)/1000);

         //求小时(h):

         var h=Math.floor(s/3600);

         //如果h<10,就改为0+h

         h<10&&(h="0"+h);

         //求分钟(m):

         var m=Math.floor(s%3600/60);

         //如果m<10,就改为0+m

         m<10&&(m="0"+m);

         //求秒(s):

         s%=60;

         //如果s<10,就改为0+s

         s<10&&(s="0"+h);

         //找到id为time的span,设置其内容为:h:m:s

         document.getElementById("time").innerHTML=h+":"+m+":"+s;

     }

      task();

     //启动定时器

     var timer=setInterval(task,1000);

     //停止定时器

     function stop(btn){

         //如果btn的内容为||

         if(btn.innerHTML=="||"){

             //停止定时器

             clearInterval(timer);

             //修改btn的内容为|>

             btn.innerHTML="|>"}

         //否则

         else{

         //启动定时器

             timer=setInterval(task,1000);

         //修改btn的内容为||

             btn.innerHTML="||";

         }

     }

 </script>

 </body>

 </html>

相关文章