定时器setTimeout和setInterval的简单应用

最新推荐文章于 2024-07-09 17:40:29 发布

小粗腿Cc

最新推荐文章于 2024-07-09 17:40:29 发布

阅读量978

点赞数 1

本文链接：https://blog.csdn.net/weixin_45249263/article/details/123774091

版权

本文简单利用定时器setTimeout和setInterval举了两个小栗子：定时炸弹和1-100递增

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13-14定时器</title>
    <style>
        em {
            font-style: normal;
        }
    </style>
</head>

<body>
    <h2>@定时器</h2>

    <!-- ----------------------------------13-------------------------------------------------------------- -->
    <br>
    <h3>13 在页面上显示10秒的倒计时， 然后显示“ boom!!!”</h3>
    <em id="p1">定时器开启,10S倒计时开始:</em>
    <em id="p2"></em>
    <script>
        var count1 = 10
        var changeP = document.querySelector("#p1")
        var changeP2 = document.querySelector("#p2")
        // 设定一个10s的定时器
        setTimeout(
            function () {
                changeP.innerText = "噫吁嚱,要boom了!!!"
            },
            10 * 1000
        )
        // 设定一个10s倒计时
        var timer = setInterval(
            function () {
                --count1
                changeP2.innerText = count1
                if (count1 === 0) {
                    clearInterval(timer)
                    count1 = 10
                }
            }, 1000
        )
    </script>

    <!-- ----------------------------------14-------------------------------------------------------------- -->
    <br>
    <h3>14 每秒产生并打印递增的自然数1、 2、 3...，直到100为止， 点击按钮暂停 / 继续</h3>
    <em id="em4">倒递增的自然数</em>
    <button id="btnClear">暂停</button>
    <script>
        var em4 = document.querySelector("#em4")
        var btnClear = document.querySelector("#btnClear")
        var count = 1
        var timerId = null
        // 开始倒计时
        function startAutoPlay() {
            if (!timerId) {
                timerId = setInterval(
                    function countNumber() {
                        em4.innerText = count++
                        if (count === 100) {
                            clearInterval(timer)
                            count = 0
                        }
                    },
                    1000
                )
            }
        }
        startAutoPlay()

        // 给按钮绑定事件委托，实现暂停/继续的功能
        btnClear.addEventListener(
            "click",
            function (e) {
                if (e.target.innerText === "暂停") {
                    clearInterval(timerId)
                    timerId = null
                    btnClear.innerText = "继续"
                } else if (e.target.innerText === "继续") {
                    startAutoPlay()
                    btnClear.innerText = "暂停"
                }
            }
        )
    </script>
</body>

</html>