<!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做了一个计时器的功能,但是有一个问题,就是,这个计时器会闪烁,实在是很伤脑筋,暂时还没想到如何解决这个问题,先留个坑吧。