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