js定时器demo-526互联

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>挑战下能不能点到10:</p>
    <button id="startBtn">开始</button>
    <button id="pauseBtn">暂停</button>
    <h1>7</h1>
    <script>
        const numbers = Array.from({ length: 11 }, (_, index) => index + 1); // 生成1到11数字
        const btnStart = document.getElementById("startBtn");
        const btnPause = document.getElementById("pauseBtn");
        const h1 = document.querySelector("h1");
        let currentNumber = 1;
        let intervalId;

        btnStart.onclick = function () {
            console.log("开始跑了");
            clearInterval(intervalId); // 在启动新定时器之前清除之前的定时器 不然会出bug
            intervalId = setInterval(function () {
                h1.innerText = currentNumber;
                currentNumber++;

                if (currentNumber > numbers.length) {
                    // clearInterval(intervalId);
                    currentNumber = 1; // 重置计数
                }
            }, 50); // 调整速度为500毫秒
        }

        btnPause.onclick = function () {
            console.log("暂停");
            clearInterval(intervalId);
        }
    </script>
</body>

</html>