当前位置：首页 > JavaScript

js实现秒表盘

2026-03-15 19:19:04JavaScript

js实现秒表盘

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

HTML结构

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

CSS样式

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

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

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

JavaScript实现

let startTime;
let elapsedTime = 0;
let timerInterval;
const display = document.getElementById('display');
const startBtn = document.getElementById('startBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resetBtn = document.getElementById('resetBtn');

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

function updateDisplay() {
  display.textContent = formatTime(elapsedTime);
}

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

  startBtn.disabled = true;
  pauseBtn.disabled = false;
  resetBtn.disabled = false;
}

function pauseTimer() {
  clearInterval(timerInterval);
  startBtn.disabled = false;
  pauseBtn.disabled = true;
}

function resetTimer() {
  clearInterval(timerInterval);
  elapsedTime = 0;
  updateDisplay();
  startBtn.disabled = false;
  pauseBtn.disabled = true;
  resetBtn.disabled = true;
}

startBtn.addEventListener('click', startTimer);
pauseBtn.addEventListener('click', pauseTimer);
resetBtn.addEventListener('click', resetTimer);