在模仿的情况下,对其代码进行微微更改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
margin: 0 auto;
width: 400px;
height: 400px;
}
#time {
width: 400px;
height: 400px;
background: #f4f75a;
margin-bottom: 10px;
text-align: center;
line-height: 400px;
font-size: 130px;
box-sizing: border-box;
}
button {
width: 100px;
height: 50px;
border: none;
background: #3f8dfa;
color: #fff;
margin: 0px 15px;
}
button:disabled{
background: greenyellow;
}
</style>
</head>
<body>
<div class="box">
<div id="time">
0
</div>
<button id="start">开始</button>
<button id="stop">停止</button>
<button id="back">归0</button>
</div>
<script>
// 获取按个按钮
var start = document.querySelector("#start");
var stop = document.querySelector("#stop");
var back = document.querySelector("#back");
var timeBox= document.querySelector("#time");
// console.log(start,stop,back);
/*
*为三个点击按钮添加点击事件
*/
let second=1;
var time;
// 开始计数
start.onclick=function(){
// 点击禁用按钮(锁)
this.disabled=true;
time=setInterval(function(){
timeBox.innerHTML=second++;
if(second>=10){
second=0;
}
},1000)
}
// 停止计数
stop.onclick=function(){
start.disabled=false;
clearInterval(time);
}
// 归0
back.onclick=function(){
start.disabled=false;
second=0;
timeBox.innerHTML="0";
}
</script>
</body>
</html>