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基本操作（获取元素、节点的创建和添加、节点的替换和删除）中的 节点的创建 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

document.createElement 创建元素节点

 var oDiv = document.createElement("div");
        console.log(oDiv);

在这里插入图片描述
如何把这个属性节点添加到DOM树中

 <div id="box">
        <span>我是haven</span>
    </div>

  var oBox = document.getElementById("box");
        var oDiv = document.createElement("div");
        oBox.appendChild(oDiv);

在这里插入图片描述
document.createTextNode 创建文本节点

var oText = document.createTextNode("heaven")
        console.log(oText);

在这里插入图片描述
如何把这个文本节点添加到DOM树中

 <div id="box">
        <span>我是haven</span>
    </div>

 var oBox = document.getElementById("box");
        var oText = document.createTextNode("heaven");
        oBox.appendChild(oText);

在这里插入图片描述
document.createComment 创建注释节点

var oComment = document.createComment("我是注释节点");
        console.log(oComment);

在这里插入图片描述
如何把这个注释节点添加到DOM树中

<div id="box">
        <span>我是haven</span>
    </div>

 var obox = document.getElementById("box");
        var oComment = document.createComment("我是注释节点");
        obox.appendChild(oComment);

在这里插入图片描述
document.createDocumentFragment 创建文档片段节点

   var fragment = document.createDocumentFragment();
        console.log(fragment);

在这里插入图片描述