希望各位帮忙 改一下代码
当点击“开始”时，开始倒计时，此时按钮名称变成“停止”
当点击“停止”时，停止倒计时，按钮文字变成“开始”
与此同时重置按钮不变，在一旁。
麻烦各位大神啦
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>一个计时器</title>
<style>
#mytime{
background: #bbb;
color: black;
display: block;
background-color: whitesmoke;
}
.wrapper{
text-align: center;
width: 30%;
margin: 250px auto;
background-color: red;
border: 4px solid black;
}
</style>
</head>
<body>
<div class="wrapper">
<h1 id=mytime>显示时间</h1>
<!-- <input id="mytime" type="text" name="" value="显示时间"> -->
<button id="stop" name="button" onclick="stop()">停止</button>
<button id="start" name="button" onclick="start()">开始</button>
<button id="reset" name="button" onclick="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>
