秒表【JavaScript】

这个代码实现了一个基本的功能性秒表。

实现功能：

代码：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>秒表</title><style>#stopwatch {font-size: 2em;margin-bottom: 20px;}button {font-size: 1.5em;margin: 5px;}</style></head><body><div id="stopwatch">00:00:00</div><button id="startBtn">开始</button><button id="stopBtn">停止</button><button id="resetBtn">重置</button><script>let startTime = 0;let elapsedTime = 0;let timerInterval;const stopwatchDisplay = document.getElementById('stopwatch');function formatTime(time) {const hours = String(Math.floor((time / 3600000) % 60)).padStart(2, '0');const minutes = String(Math.floor((time / 60000) % 60)).padStart(2, '0');const seconds = String(Math.floor((time / 1000) % 60)).padStart(2, '0');return `${hours}:${minutes}:${seconds}`;}function startTimer() {// 确保在被按下时，计时器已经被清除if (timerInterval) {clearInterval(timerInterval);}startTime = Date.now() - elapsedTime;timerInterval = setInterval(() => {elapsedTime = Date.now() - startTime;stopwatchDisplay.textContent = formatTime(elapsedTime);}, 1000);}function stopTimer() {clearInterval(timerInterval);}function resetTimer() {clearInterval(timerInterval);elapsedTime = 0;stopwatchDisplay.textContent = formatTime(elapsedTime);startTime = 0; // 重置启动时间，确保计时从零开始}document.getElementById('startBtn').onclick = startTimer;document.getElementById('stopBtn').onclick = stopTimer;document.getElementById('resetBtn').onclick = resetTimer;</script></body>
</html>

部分代码解析：

1. 变量声明

let startTime = 0;        // 记录秒表开始的时间（毫秒）
let elapsedTime = 0;      // 记录已经经过的时间（毫秒）
let timerInterval;        // 用于存储setInterval的返回值，以便后续清除
const stopwatchDisplay = document.getElementById('stopwatch'); // 获取秒表显示的DOM元素

2. 时间格式化函数

function formatTime(time) {const hours = String(Math.floor((time / 3600000) % 60)).padStart(2, '0');const minutes = String(Math.floor((time / 60000) % 60)).padStart(2, '0');const seconds = String(Math.floor((time / 1000) % 60)).padStart(2, '0');return `${hours}:${minutes}:${seconds}`;
}

功能：将经过的时间（以毫秒为单位）转换为hh:mm:ss格式。
具体步骤：
- Math.floor((time / 3600000) % 60)：计算小时数并取模以确保小时数不超过59（在这里其实可以去掉% 60，因为小时数会超过60）。
- Math.floor((time / 60000) % 60)：计算分钟数。
- Math.floor((time / 1000) % 60)：计算秒数。
- padStart(2, '0')：确保每部分至少是两位数。

3. 启动计时器函数

function startTimer() {if (timerInterval) {clearInterval(timerInterval); // 如果计时器已经在运行，则先清除它}startTime = Date.now() - elapsedTime; // 计算实际开始时间，减去已用时间timerInterval = setInterval(() => {elapsedTime = Date.now() - startTime; // 计算经过的时间stopwatchDisplay.textContent = formatTime(elapsedTime); // 更新显示}, 1000); // 每秒更新一次
}

功能：开始计时器。
逻辑：
- 如果计时器已经在运行，先用clearInterval停止它，避免重叠。
- startTime设置为当前时间减去已经过的时间。
- setInterval每秒更新一次elapsedTime并刷新显示。

4. 停止计时器函数

function stopTimer() {clearInterval(timerInterval); // 清除当前计时器
}

功能：停止计时器。
逻辑：通过调用clearInterval(timerInterval)停止定时器。

5. 重置计时器函数

function resetTimer() {clearInterval(timerInterval); // 清除当前计时器elapsedTime = 0; // 重置经过的时间为0stopwatchDisplay.textContent = formatTime(elapsedTime); // 更新显示startTime = 0; // 重置开始时间，确保计时从零开始
}

功能：重置计时器。
逻辑：
- 首先停止计时器。
- 将elapsedTime设置为0并更新显示为00:00:00。
- 重置startTime，确保下一次启动时从零开始。

6. 事件绑定

document.getElementById('startBtn').onclick = startTimer;
document.getElementById('stopBtn').onclick = stopTimer;
document.getElementById('resetBtn').onclick = resetTimer;