如何使用vanilla JS让秒表在用户点击同一按钮两次时暂停？

要实现这个功能，可以使用vanilla JS编写以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>秒表</title>
</head>
<body>
    <button id="timer-btn" onclick="startTimer()">开始/暂停</button>
    <p id="timer">0:00</p>

    <script>
        var timerInterval;
        var startTime;
        var running = false;

        function startTimer() {
            var timerBtn = document.getElementById("timer-btn");

            if (running) {
                // 暂停
                clearInterval(timerInterval);
                timerBtn.innerText = "开始";
                running = false;
            } else {
                // 开始
                startTime = Date.now();
                timerInterval = setInterval(updateTimer, 1000);
                timerBtn.innerText = "暂停";
                running = true;
            }
        }

        function updateTimer() {
            var elapsedTime = Math.floor((Date.now() - startTime) / 1000);
            var minutes = Math.floor(elapsedTime / 60);
            var seconds = elapsedTime % 60;

            var timerDisplay = document.getElementById("timer");
            timerDisplay.innerText = minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
        }
    </script>
</body>
</html>

这段代码实现了一个简单的秒表功能，当用户点击按钮时，如果秒表正在运行，则暂停秒表并将按钮文本改为“开始”；如果秒表已经暂停，则重新开始计时并将按钮文本改为“暂停”。

这里使用了setInterval函数来定时更新秒表显示，每秒钟执行一次updateTimer函数。通过计算从开始计时到现在的时间差，可以得到秒表显示的分钟和秒钟。这个时间差是通过获取当前时间戳Date.now()来计算的。

推荐腾讯云的相关产品：云服务器（CVM）用于部署和运行应用程序、云数据库 MySQL（CDB）用于存储和管理数据。

参考链接：