JS：定时器练习

最新推荐文章于 2022-09-27 22:49:23 发布

红嘴-蓝鹊

最新推荐文章于 2022-09-27 22:49:23 发布

阅读量538

点赞数 1

分类专栏： JS基础文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_48475463/article/details/122568205

版权

JS基础专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1. 3秒后引爆炸弹

<body>
    <p id="Bomb">距离炸弹爆炸还有10秒！</p>
    <button id="btn">拆取炸弹</button>
    <script>
        // 3秒后引爆炸弹
        function timerBomb1() {
            // 引爆炸弹的赋值式函数
            var handler = function () {
                Bomb.innerText = "BOOOM!!!!!";
            }
            // 3秒后执行handler函数
            setTimeout(
                handler,
                3000
            )

        }
        // 调用
        // timerBomb1();
    </script>
</body>

2. 一个可以拆除的定时炸弹

<body>
    <p id="Bomb">距离炸弹爆炸还有10秒！</p>
    <button id="btn">拆取炸弹</button>
    <script>
        // 一个可以拆除的定时炸弹
        function timerBomb2() {
            // 设置一个延时执行的计时器
            // 返回值：该计时器的id(可以通过id解除计时器)
            var timerId = setTimeout(
                //    延时执行的任务
                function task() {
                    Bomb.innerText = "BOOOM!!!!"
                },
                //5000毫秒后执行
                5000
            )

            btn.onclick = function () {
                //清除延时执行计时器
                clearTimeout(timerId);
            }
        }
        //调用
        timerBomb2();
    </script>
</body>

3. 带倒计时的定时器

<body>
    <p id="Bomb">距离炸弹爆炸还有10秒！</p>
    <button id="btn">拆取炸弹</button>
    <script>
        // 带倒计时的定时器
        function timerBomb3() {
            // 爆炸剩余秒数
            var secondsLeft = 10;
            // 设置一个周期性执行的定时器 interval 间隔
            var timerId = setInterval(() => {
                // 先减减 再输出
                Bomb.innerText = `距离炸弹爆炸还有${--secondsLeft}秒！`;
                // 时间结束时爆炸
                if (secondsLeft === 0) {
                    // 引爆炸弹
                    Bomb.innerText = "BOOOM!!!!!";
                    // 移除定时器
                    clearInterval(timerId);
                }
            }, 
            // 每秒执行一次
            1000
            );
            btn.onclick = function(){
                // 清除定时器
                clearInterval(timerId);
                Bomb.innerText = "炸弹已移除"
            }

        }
        //调用
        timerBomb3();
    </script>
</body>

红嘴-蓝鹊

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS：定时器练习

1. 3秒后引爆炸弹<body> <p id="Bomb">距离炸弹爆炸还有10秒！</p> <button id="btn">拆取炸弹</button> <script> // 3秒后引爆炸弹 function timerBomb1() { // 引爆炸弹的赋值式函数 var handler = function () {
复制链接

扫一扫

专栏目录