<!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{ 100px;height: 100px;border: solid 1px black;margin: 40px auto;text-align: center;line-height: 100px;font-size: 30px;}
#btn{display: block;margin: 0 auto;font-size: 20px; 100px;}
</style>
</head>
<body>
<div id="box">5</div>
<input type="button" id="btn" value="开始" name="">
<script>
var obox = document.getElementById("box");
var obtn = document.getElementById("btn");
var s = obox.innerHTML; // 要减的值
var s2 = obox.innerHTML; // 最终要使用的初始值
// 点击的状态：0开始；1暂停；2复位
var type = 0;
// 计时器的返回值变量
var t;
// 终点值，目标值，停止值
var target = 1;
obtn.onclick = function(){
if(type === 0){ // 如果状态为0，执行开始的功能
t = setInterval(function(){
// 判断计算的值是否为终点值
if(s <= target){
obox.innerHTML = "结束了";
clearInterval(t);
// 如果到终点了，将状态改成下次的状态
obtn.value = "复位";
type = 2;
}else{
// 没到终点，正常减少，设置回去
s--;
obox.innerHTML = s;
}
},1000)
// 开始功能结束，改变状态为下次状态
type = 1;
obtn.value = "暂停";
}else if(type === 1){ // 如果状态为1，执行暂停功能
clearInterval( t );
// 暂停功能结束，改变状态为下次状态
type = 0;
obtn.value = "继续";
}else{ // 如果状态为2，执行复位功能
// 复位页面显示的值
obox.innerHTML = s2;
// 复位计算的值
s = s2;
// 复位按钮的文字
obtn.value = "开始";
// 复位状态
type = 0;
}
}
</script>
</body>
</html>