倒计时
获取设置的结构,通过移除/添加disabled 启用/禁用按钮
(1)点击开始 禁用开始 启用暂停 (暂停复位默认禁用)
之后执行 设置终点判断 到终点后->停止 禁用开始 禁用暂停 启用复位;没到终点->继续减1
(2)点击暂停 禁用暂停 启用开始 清除计时器达到暂停目的
(3)点击复位 重置为初始值 启用开始 禁用复位
(1)HTML部分
<div class="box">3</div>
<div class="btns">
<input type="button" value="开始" id="btn1">
<input type="button" value="暂停" id="btn2" disabled="disabled">
<input type="button" value="复位" id="btn3" disabled="disabled">
</div>
(2)CSS部分
.box {
width: 200px;
height: 200px;
margin: 0 auto;
border: solid 1px black;
font-size: 80px;
line-height: 200px;
text-align: center;
}
.btns {
display: flex;
justify-content: center
}
(3)JS部分
// 获取
var obox = document.querySelector(".box"); //放数字
var obtn1 = document.getElementById("btn1"); //开始
var obtn2 = document.getElementById("btn2"); //暂停
var obtn3 = document.getElementById("btn3"); //复位
// 保存初始值 给复位使用
var start = obox.innerHTML; //获取整个标签
// 计时器分返回值
var t;
//开始的点击
obtn1.onclick = function() {
// 禁用开始
obtn1.setAttribute("disabled", "disabled");
// 启用暂停
obtn2.removeAttribute("disabled");
// 开始计时器之前先清除
clearInterval(t);
// 开始计时器
t = setInterval(function() {
// 判断是否到终点(注意从页面上获取到的内容是字符 所以要==)
// 因为清除计时器是清除下一次慢一拍 所以判断是不是到1
// 到0的时候 复位会慢一秒启用 所以要设置1 才能同步启用
if (obox.innerHTML == 1) {
// 到终点 暂停
clearInterval(t);
// 设置终点
obox.innerHTML = 0;
// 禁用开始
obtn1.setAttribute("disabled", "disabled");
// 禁用暂停
obtn2.setAttribute("disabled", "disabled");
// 启用复位
obtn3.removeAttribute("disabled");
} else {
// 倒计时
obox.innerHTML = obox.innerHTML - 1;
}
}, 1000);
}
// 暂停的点击
obtn2.onclick = function() {
//禁用暂停
obtn2.setAttribute("disabled", "disabled");
// 启用开始
obtn1.removeAttribute("disabled");
// 清除计时器达到暂停的目的
clearInterval(t);
}
// 复位的点击
obtn3.onclick = function() {
// 重置数字为初始值
obox.innerHTML = start;
// 启用开始
obtn1.removeAttribute("disabled");
// 禁用复位
obtn3.setAttribute("disabled", "disabled")
}