当前位置：首页 > JavaScript

怎么实现秒表js

2026-04-07 16:13:01JavaScript

实现秒表的 JavaScript 代码

以下是一个简单的秒表实现，包含开始、暂停、重置功能，使用 HTML 和 JavaScript 完成。

HTML 结构

<div id="stopwatch">
  <div id="display">00:00:00</div>
  <button id="startBtn">开始</button>
  <button id="pauseBtn">暂停</button>
  <button id="resetBtn">重置</button>
</div>

CSS 样式（可选）

#stopwatch {
  text-align: center;
  margin: 50px auto;
  font-family: Arial, sans-serif;
}

#display {
  font-size: 48px;
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  margin: 0 5px;
  font-size: 16px;
  cursor: pointer;
}

JavaScript 实现

// 获取DOM元素
const display = document.getElementById('display');
const startBtn = document.getElementById('startBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resetBtn = document.getElementById('resetBtn');

let startTime;
let elapsedTime = 0;
let timerInterval;

// 格式化时间为HH:MM:SS
function formatTime(time) {
  const hours = Math.floor(time / 3600000);
  const minutes = Math.floor((time % 3600000) / 60000);
  const seconds = Math.floor((time % 60000) / 1000);

  return (
    String(hours).padStart(2, '0') + ':' +
    String(minutes).padStart(2, '0') + ':' +
    String(seconds).padStart(2, '0')
  );
}

// 更新显示
function updateDisplay() {
  const currentTime = Date.now();
  elapsedTime = currentTime - startTime;
  display.textContent = formatTime(elapsedTime);
}

// 开始计时
startBtn.addEventListener('click', () => {
  startTime = Date.now() - elapsedTime;
  timerInterval = setInterval(updateDisplay, 1000);
  startBtn.disabled = true;
  pauseBtn.disabled = false;
});

// 暂停计时
pauseBtn.addEventListener('click', () => {
  clearInterval(timerInterval);
  startBtn.disabled = false;
  pauseBtn.disabled = true;
});

// 重置计时
resetBtn.addEventListener('click', () => {
  clearInterval(timerInterval);
  elapsedTime = 0;
  display.textContent = '00:00:00';
  startBtn.disabled = false;
  pauseBtn.disabled = true;
});

// 初始化按钮状态
pauseBtn.disabled = true;

功能说明

开始功能：点击开始按钮后，计时器开始运行，显示从00:00:00开始递增的时间。
暂停功能：点击暂停按钮可以停止计时，再次点击开始可以继续计时。
重置功能：点击重置按钮将计时器归零，并停止当前计时。

高级功能扩展

如果需要更精确的计时（毫秒级），可以修改以下部分：

怎么实现秒表js

// 修改updateDisplay函数，增加毫秒显示
function formatTime(time) {
  const hours = Math.floor(time / 3600000);
  const minutes = Math.floor((time % 3600000) / 60000);
  const seconds = Math.floor((time % 60000) / 1000);
  const milliseconds = Math.floor((time % 1000) / 10);

  return (
    String(hours).padStart(2, '0') + ':' +
    String(minutes).padStart(2, '0') + ':' +
    String(seconds).padStart(2, '0') + '.' +
    String(milliseconds).padStart(2, '0')
  );
}

// 更新interval时间为更短间隔
timerInterval = setInterval(updateDisplay, 10);