码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-06-14 12:51:57      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:code   www   定时   val   charset   load   代码   ==   xmlns   

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

 

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

标签:code   www   定时   val   charset   load   代码   ==   xmlns   

原文地址:https://www.cnblogs.com/f6056/p/11022342.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!