<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
200px;
height: 200px;
background: #000;
margin: 100px auto;
color: blanchedalmond;
font-size: 100px;
font-weight: bolder;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<input type="button" id="start" value="开始">
<input type="button" id="end" value="暂停">
<div class="box">10</div>
</body>
</html>
<script>
var abox = document.getElementsByClassName("box")[0];
var ostart = document.getElementById("start");
var oend = document.getElementById("end");
var t;
ostart.onclick = function () {
clearInterval(t);//每次点击时都要清除定时器，否则会开启两次定时器，速度会变快
t = setInterval(function () {//t要作为全局变量
if (abox.innerHTML > 0) {
abox.innerHTML--;
} else {
clearInterval(t);
}
}, 1000)
}
oend.onclick = function () {
clearInterval(t);
}
</script>