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

Posted f6056

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了定时器小案例:模拟火箭发射按钮相关的知识,希望对你有一定的参考价值。

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

 

以上是关于定时器小案例:模拟火箭发射按钮的主要内容,如果未能解决你的问题,请参考以下文章

多线程控制工具类--倒计时器CountDownLatch的使用(模仿火箭发射)

一些恶心的代码片段

072-火箭发射游戏(select 关键字)

Rocketlab公司火箭Electron介绍

逐梦航天—数字孪生技术仿真火箭发射!

蓝桥杯选拔赛真题31Scratch发射火箭 少儿编程scratch蓝桥杯选拔赛真题讲解