标签：charset 按钮 script tle element tar interval 初始 状态
设计一个倒计时，点击"开始"，开始倒计时，按钮变成“暂停”,点击“暂停”之后，按钮变成“继续”，当倒计时结束后，按钮为“复位”，点击可再次实现倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
width: 200px;
height: 200px;
border: 1px solid palegreen;
font-size: 35px;
line-height: 200px;
text-align: center;
margin: 20px auto;
}
#btn{
display: block;
width: 200px;
height: 35px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box">
60
</div>
<input type="button" value="开始" id="btn">
</body>
<script>
var obox = document.getElementById("box");
var obtn = document.getElementById("btn");
//将页面的数据传给star和num;num用来计算,star用来保存初始值
var star = obox.innerHTML;
var num = obox.innerHTML;
var t;
//设置一个开关onoff,每次点击的时候,所做的事件不一样
var onoff = 0;
//鼠标点击事件
obtn.onclick = function() {
clearInterval(t);
//判断,当onoff=0时,执行开始倒计时
if (onoff == 0) {
t = setInterval(function() {
//计时器每次执行都要判断是否结束
if (num == 1) {
//当num为1时,表示倒计时结束,更改页面显示内容,更改按钮以及状态,清除计时器
num = "倒计时结束";
obtn.value = "复位";
onoff = 1;
clearInterval(t);
} else {
num--;
}
obox.innerHTML=num;
}, 1000)
obtn.value="暂停";
onoff=2
//当倒计时结束之后,对其进行复位,恢复到初始状态
}else if(onoff==1){
obox.innerHTML=star;
num=star;
obtn.value="开始";
onoff=0;
//暂停事件,当onoff=2时,暂停事件
}else if(onoff==2){
clearInterval(t);
obtn.value="继续"
onoff=0;
}
}
</script>
</html>
标签：charset 按钮 script tle element tar interval 初始 状态
原文地址：https://www.cnblogs.com/hupeng1996/p/11403514.html
