如何实现页面加载时启动毫秒级实时递增计时器并点击按钮停止

我来帮你调整代码，实现页面加载自动启动、实时显示毫秒级递增、点击按钮停止的计时器功能。核心是用setInterval来周期性更新显示，同时记录计时器实例以便后续停止。

完整代码示例 #

<div id="timer">0</div>
<button class="play" type="button" aria-label="Stop Timer"></button>

.play {
 -webkit-appearance: none;
 appearance: none;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 90px;
 height: 90px;
 border-radius: 50%;
 cursor: pointer;
 border: 9px solid blue;
 background: transparent;
 filter: drop-shadow(3px 3px 3px #000000b3);
}

#timer {
 position: absolute;
 top: 30%;
 left: 50%;
 transform: translateX(-50%);
 font-size: 2rem;
 font-weight: bold;
 color: #333;
}

document.addEventListener('DOMContentLoaded', function() {
  // 记录页面加载完成时的起始时间
  const startTime = new Date();
  // 保存计时器的ID，用于后续停止计时
  let timerInterval;
  // 获取显示计时器的元素
  const timerElement = document.getElementById('timer');
  // 获取按钮元素
  const stopButton = document.querySelector('.play');

  // 更新计时器显示的函数
  function updateTimer() {
    // 计算当前时间与起始时间的差值（毫秒）
    const elapsedMs = new Date() - startTime;
    // 将毫秒数显示到页面上
    timerElement.textContent = `${elapsedMs} ms`;
  }

  // 页面加载完成后立即启动计时器，每1毫秒更新一次（浏览器实际最小间隔约4ms，不影响毫秒级显示）
  timerInterval = setInterval(updateTimer, 1);

  // 点击按钮时停止计时
  stopButton.addEventListener('click', function() {
    clearInterval(timerInterval);
    // 修改按钮的 aria 标签提示已停止
    this.setAttribute('aria-label', 'Timer Stopped');
  });
});

关键改动说明 #

• 添加计时器显示元素：新增<div id="timer">用于实时展示流逝的毫秒数
• 使用setInterval实时更新：通过周期性调用updateTimer函数，计算并刷新页面上的计时数值
• 记录计时器ID：用timerInterval保存setInterval的返回值，点击按钮时通过clearInterval终止计时
• 页面加载即启动：通过DOMContentLoaded事件确保DOM加载完成后再初始化计时器，避免找不到元素的问题
• 优化按钮定位：给按钮添加transform: translate(-50%, -50%)，让它在页面中居中显示

这样修改后，页面加载完成就会自动开始计时，你能看到毫秒数实时跳动，点击蓝色圆形按钮就会立刻停止计时啦～

内容的提问来源于stack exchange，提问作者user17631451