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

梦里梦外; 2022-01-06 20:01 209阅读 0赞

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

![1378575-20190614111111510-2131831750.gif][]

参考代码：

<!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

[1378575-20190614111111510-2131831750.gif]: /images/20211227/92f36b0af70b40ce8252a0735167d252.png

发表评论取消回复

表情：

评论列表（有 0 条评论，209人围观）

还没有评论，来说两句吧...

相关阅读

相关 031-QObject-定时器-案例

资源：[Python-GUI-PyQ5总概述.xmind][Python-GUI-PyQ5_.xmind]；[QObject.xmind][] ---------------

本是古典何须时尚/ 2023年07月10日 08:49/ 0 赞/ 10 阅读

相关 123.火箭发射特效

效果 (源码网盘地址在最后) ![af5a86ec030604709be4772e5153fa6b.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

不念不忘少年蓝@/ 2022年12月31日 03:22/ 0 赞/ 184 阅读

相关 cesium模拟火箭发射

效果及过程如下倒计时 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

喜欢ヅ旅行/ 2022年11月25日 10:22/ 0 赞/ 250 阅读

相关微信小程序——模拟时钟案例

文章目录案例效果图前导知识：canvas 代码部分案例效果图实时更新，因为我当时是六点多 ![在这里插入图片描

╰+哭是因爲堅強的太久メ/ 2022年11月16日 01:37/ 0 赞/ 394 阅读

相关小火箭案例

package com.itheima.rocket; import java.nio.channels.AlreadyConnectedExcept

我会带着你远行/ 2022年08月05日 02:17/ 0 赞/ 172 阅读

相关 javaScript小项目-----轮播图--按钮+定时器

</pre><pre class="html" name="code" snippet_file_name="blog_20160823_5_8748669" code

╰半橙微兮°/ 2022年07月17日 00:29/ 0 赞/ 167 阅读

相关模拟QQ上面的导航按钮

在做项目的时候，用到了类似QQ最上面的按钮切换的模式，所以我就自己写了一下：代码如下： 1.首先是布局页面：我用的是radioGroup和两个radioButton

你的名字/ 2022年07月13日 12:47/ 0 赞/ 191 阅读

相关 Span模拟单选按钮Radio

![20170209084446488][] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

迷南。/ 2022年07月12日 03:24/ 0 赞/ 250 阅读

相关模拟点击网页按钮

转自：http://blog.csdn.net/tiantian1980/article/details/12322191 [Demo下载][Demo]

た入场券/ 2022年06月01日 23:36/ 0 赞/ 337 阅读

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

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

梦里梦外;/ 2022年01月06日 20:01/ 0 赞/ 210 阅读