当前位置：首页 > JavaScript

js实现秒表盘

2026-02-02 19:00:47JavaScript

js实现秒表盘

以下是用JavaScript实现秒表盘的代码示例，包含开始、暂停、重置功能，并显示毫秒级精度：

HTML结构

<div class="stopwatch">
  <div class="display">00:00:00.000</div>
  <button class="start">开始</button>
  <button class="pause">暂停</button>
  <button class="reset">重置</button>
</div>

CSS样式

.stopwatch {
  text-align: center;
  font-family: Arial, sans-serif;
}

.display {
  font-size: 3em;
  margin: 20px;
}

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

JavaScript实现

class Stopwatch {
  constructor(display) {
    this.display = display;
    this.running = false;
    this.startTime = null;
    this.elapsedTime = 0;
    this.timer = null;
  }

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

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

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

  update() {
    const elapsed = Date.now() - this.startTime;
    const milliseconds = Math.floor(elapsed % 1000);
    const seconds = Math.floor((elapsed / 1000) % 60);
    const minutes = Math.floor((elapsed / (1000 * 60)) % 60);
    const hours = Math.floor(elapsed / (1000 * 60 * 60));

    this.display.textContent = 
      `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(3, '0')}`;
  }
}

// 初始化
const display = document.querySelector('.display');
const startBtn = document.querySelector('.start');
const pauseBtn = document.querySelector('.pause');
const resetBtn = document.querySelector('.reset');

const stopwatch = new Stopwatch(display);

startBtn.addEventListener('click', () => stopwatch.start());
pauseBtn.addEventListener('click', () => stopwatch.pause());
resetBtn.addEventListener('click', () => stopwatch.reset());