这个代码实现了一个基本的功能性秒表。
实现功能:
代码:
<!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. 变量声明
javascript">let startTime = 0; // 记录秒表开始的时间(毫秒)
let elapsedTime = 0; // 记录已经经过的时间(毫秒)
let timerInterval; // 用于存储setInterval的返回值,以便后续清除
const stopwatchDisplay = document.getElementById('stopwatch'); // 获取秒表显示的DOM元素
2. 时间格式化函数
javascript">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. 启动计时器函数
javascript">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. 停止计时器函数
javascript">function stopTimer() {clearInterval(timerInterval); // 清除当前计时器
}
- 功能:停止计时器。
- 逻辑:通过调用
clearInterval(timerInterval)
停止定时器。
5. 重置计时器函数
javascript">function resetTimer() {clearInterval(timerInterval); // 清除当前计时器elapsedTime = 0; // 重置经过的时间为0stopwatchDisplay.textContent = formatTime(elapsedTime); // 更新显示startTime = 0; // 重置开始时间,确保计时从零开始
}
- 功能:重置计时器。
- 逻辑:
- 首先停止计时器。
- 将
elapsedTime
设置为0并更新显示为00:00:00
。 - 重置
startTime
,确保下一次启动时从零开始。
6. 事件绑定
javascript">document.getElementById('startBtn').onclick = startTimer;
document.getElementById('stopBtn').onclick = stopTimer;
document.getElementById('resetBtn').onclick = resetTimer;
- 功能:将按钮的点击事件与相应的函数绑定。
- 逻辑:当用户点击“开始”、“停止”或“重置”按钮时,分别调用对应的函数。