当前位置：首页 > JavaScript

怎么实现秒表js

2026-03-15 22:49:44JavaScript

实现秒表的基本思路

使用JavaScript的Date对象或performance.now()来获取精确的时间差，结合setInterval或requestAnimationFrame更新显示。核心逻辑包括记录开始时间、计算经过时间并格式化输出。

怎么实现秒表js

基本HTML结构

<div id="stopwatch">00:00:00.000</div>
<button id="startBtn">开始</button>
<button id="stopBtn">停止</button>
<button id="resetBtn">重置</button>

JavaScript实现代码

let startTime;
let elapsedTime = 0;
let timerInterval;
const display = document.getElementById('stopwatch');

function formatTime(ms) {
  const date = new Date(ms);
  const hours = date.getUTCHours().toString().padStart(2, '0');
  const minutes = date.getUTCMinutes().toString().padStart(2, '0');
  const seconds = date.getUTCSeconds().toString().padStart(2, '0');
  const milliseconds = date.getUTCMilliseconds().toString().padStart(3, '0');
  return `${hours}:${minutes}:${seconds}.${milliseconds}`;
}

function startTimer() {
  startTime = Date.now() - elapsedTime;
  timerInterval = setInterval(() => {
    elapsedTime = Date.now() - startTime;
    display.textContent = formatTime(elapsedTime);
  }, 10);
}

function stopTimer() {
  clearInterval(timerInterval);
}

function resetTimer() {
  clearInterval(timerInterval);
  elapsedTime = 0;
  display.textContent = '00:00:00.000';
}

document.getElementById('startBtn').addEventListener('click', startTimer);
document.getElementById('stopBtn').addEventListener('click', stopTimer);
document.getElementById('resetBtn').addEventListener('click', resetTimer);

高精度版本（使用performance.now）

let startTime;
let elapsedTime = 0;
let timerInterval;
const display = document.getElementById('stopwatch');

function formatTime(ms) {
  const date = new Date(ms);
  return date.toISOString().substr(11, 12);
}

function startTimer() {
  startTime = performance.now() - elapsedTime;
  timerInterval = requestAnimationFrame(function updateTimer() {
    elapsedTime = performance.now() - startTime;
    display.textContent = formatTime(elapsedTime);
    timerInterval = requestAnimationFrame(updateTimer);
  });
}

function stopTimer() {
  cancelAnimationFrame(timerInterval);
}

function resetTimer() {
  cancelAnimationFrame(timerInterval);
  elapsedTime = 0;
  display.textContent = '00:00:00.000';
}