preload-image

JS小练习之实现一个计时器(开始,暂停,重置)

<!DOCTYPE html> <html lang="en" dir="ltr">   <head>     <meta charset="utf-8">     <title>一个计时器</title>     <style>       #mytime{         background: #bbb;         color: #fff;         display: block;       }       .wrapper{         text-align: center;         width: 60%;         margin: 250px auto;       }     </style>   </head>   <body>     <div class="wrapper">     <h1 id=mytime>显示时间</h1>     <!-- <input id="mytime" type="text" name="" value="显示时间"> -->     <button id="stop" name="button" οnclick="stop()">stop</button>     <button id="start" name="button" οnclick="start()">start</button>     <button id="reset" name="button" οnclick="reset()">reset</button>     </div>   </body>    <script type="text/javascript">    var h=m=s=ms= 0;  //定义时,分,秒,毫秒并初始化为0;    var time=0;     function timer(){   //定义计时函数      ms=ms+50;         //毫秒      if(ms>=1000){        ms=0;        s=s+1;         //秒      }      if(s>=60){        s=0;        m=m+1;        //分钟      }      if(m>=60){        m=0;        h=h+1;        //小时      }      str =toDub(h)+"时"+toDub(m)+"分"+toDub(s)+"秒"+toDubms(ms)+"毫秒";      mytime = document.getElementById('mytime');      mytime.innerHTML = str;    // document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";    }     function reset(){  //重置      clearInterval(time);      h=m=s=ms=0;      document.getElementById('mytime').innerHTML="00时00分00秒0000毫秒";    }     function start(){  //开始      time=setInterval(timer,50);    }     function stop(){  //暂停      clearInterval(time);    }     function toDub(n){  //补0操作      if(n<10){        return "0"+n;      }      else {        return ""+n;      }    }     function toDubms(n){  //给毫秒补0操作      if(n<10){        return "00"+n;      }      else {        return "0"+n;      }     }     </script>  </html>

   今天用JS做了一个计时器的功能,但是有一个问题,就是,这个计时器会闪烁,实在是很伤脑筋,暂时还没想到如何解决这个问题,先留个坑吧。

Back-To-Top