javascript中的dom实操运用

设置一个定时器，要求是：同一个按钮，按第一下的时候开始计时，按第二下的时候停止计时，再按一下又开始从上一次的数字开始计时，只能用dom操作和dom操作之前的知识解决

该回答引用chatgpt:

<!DOCTYPE html>
<html>
<head>
    <title>定时器示例</title>
</head>
<body>
    <h1 id="timer">00:00:00</h1>
    <button id="btn" onclick="timerFunc()">开始计时</button>

    <script>
        var timer;
        var startTime, stopTime;
        var time = 0;
        var timerElem = document.getElementById("timer");
        var btn = document.getElementById("btn");

        function timerFunc() {
            if (timer) {
                // 如果定时器已经在运行，则停止计时器
                clearInterval(timer);
                timer = null;
                stopTime = new Date();
                btn.innerHTML = "开始计时";
            } else {
                if (startTime && stopTime) {
                    // 如果已经计时过，且暂停过，则从上次时间开始计时
                    var diffTime = stopTime.getTime() - startTime.getTime();
                    time = Math.floor(diffTime / 1000);
                }
                // 开始计时
                startTime = new Date();
                timer = setInterval(function() {
                    time++;
                    var hour = Math.floor(time / 3600);
                    var minute = Math.floor(time / 60) % 60;
                    var second = time % 60;
                    timerElem.innerHTML = formatNumber(hour) + ":" + formatNumber(minute) + ":" + formatNumber(second);
                }, 1000);
                btn.innerHTML = "停止计时";
            }
        }

        function formatNumber(num) {
            return num < 10 ? "0" + num : num;
        }
    </script>
</body>
</html>

解释一下代码：

首先定义了一些变量，包括定时器、开始时间、停止时间、时间等。同时获取了需要操作的DOM元素，包括计时器和按钮。
在 timerFunc() 函数中，如果当前定时器正在运行，则停止计时器，并更新按钮的文本为“开始计时”。如果定时器未运行，则开始计时。如果已经计时过，并暂停过，则从上次时间开始计时。
在 setInterval() 中更新计时器的文本，并格式化输出小时、分钟、秒数。
formatNumber() 函数用于格式化数字，将数字小于10的前面添加0。

这篇博客: Javascript 面试题中的 原生事件绑定（跨浏览器），下面案例中dom0与dom1的区别是？ 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读: