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

最新推荐文章于 2021-05-26 05:21:10 发布

weixin_34119545

最新推荐文章于 2021-05-26 05:21:10 发布

阅读量1k

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/f6056/p/11022342.html

版权

模拟火箭发射时的按钮状态：数字从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>

转载于:https://www.cnblogs.com/f6056/p/11022342.html

weixin_34119545

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定时器小案例：模拟火箭发射按钮

模拟火箭发射时的按钮状态：数字从10减少到0，在数字变为0之前按钮均为不可点击状态，在变为0后，按钮变为可点击状态。参考代码：<!DOCTYPE html><html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-...
复制链接

扫一扫