定时器小案例：模拟火箭发射按钮

模拟火箭发射时的按钮状态：数字从10减少到0，在数字变为0之前按钮均为不可点击状态，在变为0后，按钮变为可点击状态。

参考代码：

<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>

    </style>
    <script>
        window.onload = function () {
            var oCount = document.getElementById("count");
            var oBtn = document.getElementById("btn");
            var num = 10;

            var timer = setInterval(function () {
                //每隔1秒num值减一
                oCount.innerHTML = num--;
                //num--是后减量，执行-1操作后返回未做减量操作的值，因此当oCount中的值为0时，num的值为-1。
                if (num == -1) {
                    //清除定时器
                    clearInterval(timer);
                    //修改按钮value
                    oBtn.value = "点火";
                    //移除disabled属性，让按钮可点击
                    oBtn.removeAttribute('disabled');
                    oBtn.style.color = "red";
                }
            }, 1000);
        };
    </script>
</head>

<body>
    <h1 id="count"></h1>
    <input type="button" id="btn" value="倒计时启动按钮" disabled />
</body>

</html>

 

posted @ 2019-06-14 11:13  请叫我二狗哥  阅读(480)  评论(0)  编辑  收藏  举报