<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style>
div{
200px;
height: 200px;
font-size:60px;
text-align: center;
background-color: red;
margin: 300px auto 0px;
line-height:200px;
}
#btn1{
margin: 0 auto;
display: block;
height:50px;
100px;
}
</style>
</head>
<body>
<div id="txt">
5
</div>
<input type="button" value="开始" id="btn1">
</body>
<script>
var oTxt=document.getElementById("txt");
var oBtn1=document.getElementById("btn1");
var start=oTxt.innerHTML
var i=1; //相当于开关，不同的值控制不同的功能
var num=oTxt.innerHTML///初始值为用户设置的倒计时值
var t;//设置为全局变量，方便各个功能调用。
oBtn1.onclick=function () {
clearInterval(t)//定时器开始之前先清除
if(i==1){//当i为1时，执行倒数操作
t=setInterval(function () {
console.log(num)
if(num==1){ //倒数到0之后，设置复位操作
num="over"//不显示0，而显示over
oBtn1.value="复位"
i=3;
clearInterval(t) //清除计时器
}
else {
num=num-1;
}
oTxt.innerHTML=num //变化的值显示在盒子中
},1000);
oBtn1.value="暂停"//执行后按钮状态设置为下次要进行的操作
i=2;//同时把开关设置为下一次执行的条件
}
else if(i==2){//i为2时，清除定时器
clearInterval(t)
oBtn1.value="继续";//执行后按钮状态设置为下次要进行的操作
i=1;//同时把开关设置为下一次执行的条件
}
else if(i==3){ //倒数到0时，开始执行这个操作
oTxt.innerHTML=start;//盒子里的值恢复到默认值
num=start; //num也恢复到原来的值
oBtn1.value="开始"
i=1 //重新开始倒数操作
}
}
</script>
</html>
看似简单，但是初学者写起来还是挺难的。逻辑不能乱