秒表实现js

2026-04-06 02:50:27JavaScript

使用 JavaScript 实现秒表功能

HTML 结构

创建一个简单的 HTML 结构，包含显示区域和控制按钮：

秒表实现js

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

CSS 样式（可选）

为秒表添加基本样式：

秒表实现js

#stopwatch {
  font-size: 2em;
  text-align: center;
  margin: 20px;
}
button {
  padding: 10px 20px;
  margin: 5px;
  font-size: 1em;
}

JavaScript 实现

完整的秒表功能实现代码：

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

// 初始化变量
let startTime;
let elapsedTime = 0;
let timerInterval;

// 格式化时间显示
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 = Math.floor(date.getUTCMilliseconds() / 10).toString().padStart(2, '0');

  return `${hours}:${minutes}:${seconds}.${milliseconds}`;
}

// 更新显示
function updateDisplay() {
  display.textContent = formatTime(elapsedTime);
}

// 开始计时
function startTimer() {
  startTime = Date.now() - elapsedTime;
  timerInterval = setInterval(function() {
    elapsedTime = Date.now() - startTime;
    updateDisplay();
  }, 10);

  startBtn.disabled = true;
  stopBtn.disabled = false;
}

// 停止计时
function stopTimer() {
  clearInterval(timerInterval);
  startBtn.disabled = false;
  stopBtn.disabled = true;
}

// 重置计时
function resetTimer() {
  clearInterval(timerInterval);
  elapsedTime = 0;
  updateDisplay();
  startBtn.disabled = false;
  stopBtn.disabled = true;
}

// 添加事件监听
startBtn.addEventListener('click', startTimer);
stopBtn.addEventListener('click', stopTimer);
resetBtn.addEventListener('click', resetTimer);

// 初始化显示
updateDisplay();
stopBtn.disabled = true;

功能说明

开始按钮：启动计时器，开始累计时间
停止按钮：暂停计时器，保留当前时间
重置按钮：将计时器归零，准备重新开始

高级功能扩展

如需添加更多功能，可以考虑以下扩展：

// 添加计次功能
const lapBtn = document.getElementById('lapBtn');
const lapsContainer = document.getElementById('laps');

function addLap() {
  const lapTime = document.createElement('div');
  lapTime.textContent = formatTime(elapsedTime);
  lapsContainer.appendChild(lapTime);
}

lapBtn.addEventListener('click', addLap);