当前位置：首页 > JavaScript

js 实现秒表

2026-04-06 21:01:36JavaScript

实现秒表功能

使用JavaScript实现秒表功能可以通过Date对象或performance.now()来精确计时。以下是两种常见实现方式：

方法一：基于Date对象的秒表

class Stopwatch {
  constructor() {
    this.startTime = 0;
    this.elapsedTime = 0;
    this.isRunning = false;
  }

  start() {
    if (!this.isRunning) {
      this.startTime = Date.now() - this.elapsedTime;
      this.isRunning = true;
      this.timer = setInterval(() => this.updateDisplay(), 10);
    }
  }

  pause() {
    if (this.isRunning) {
      clearInterval(this.timer);
      this.elapsedTime = Date.now() - this.startTime;
      this.isRunning = false;
    }
  }

  reset() {
    clearInterval(this.timer);
    this.elapsedTime = 0;
    this.isRunning = false;
    document.getElementById('display').textContent = '00:00:00.000';
  }

  updateDisplay() {
    const elapsed = Date.now() - this.startTime;
    const formattedTime = this.formatTime(elapsed);
    document.getElementById('display').textContent = formattedTime;
  }

  formatTime(milliseconds) {
    const date = new Date(milliseconds);
    return date.toISOString().substr(11, 12).replace('.', ':');
  }
}

// 使用示例
const stopwatch = new Stopwatch();

方法二：基于performance.now()的高精度秒表

js 实现秒表

class HighResStopwatch {
  constructor() {
    this.startTime = 0;
    this.pausedTime = 0;
    this.isRunning = false;
  }

  start() {
    if (!this.isRunning) {
      this.startTime = performance.now() - this.pausedTime;
      this.isRunning = true;
      requestAnimationFrame(() => this.update());
    }
  }

  pause() {
    if (this.isRunning) {
      this.pausedTime = performance.now() - this.startTime;
      this.isRunning = false;
    }
  }

  reset() {
    this.pausedTime = 0;
    this.isRunning = false;
    document.getElementById('display').textContent = '00:00:00.000';
  }

  update() {
    if (this.isRunning) {
      const elapsed = performance.now() - this.startTime;
      document.getElementById('display').textContent = this.formatTime(elapsed);
      requestAnimationFrame(() => this.update());
    }
  }

  formatTime(milliseconds) {
    const date = new Date(milliseconds);
    return date.toISOString().substr(11, 12).replace('.', ':');
  }
}

HTML结构示例

<div id="stopwatch">
  <div id="display">00:00:00.000</div>
  <button onclick="stopwatch.start()">Start</button>
  <button onclick="stopwatch.pause()">Pause</button>
  <button onclick="stopwatch.reset()">Reset</button>
</div>

CSS样式建议

#stopwatch {
  font-family: monospace;
  font-size: 2em;
  text-align: center;
}

#display {
  margin: 20px;
}

button {
  padding: 10px 20px;
  margin: 5px;
  font-size: 1rem;
}