＜js＞倒计时

倒计时

获取设置的结构,通过移除/添加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")
    }