秒表【JavaScript】

陆仟

已于 2024-09-24 19:31:54 修改

阅读量511

点赞数 4

分类专栏： Web前端开发文章标签： javascript

于 2024-09-23 23:30:08 首次发布

本文链接：https://blog.csdn.net/2302_77228054/article/details/142471245

版权

Web前端开发专栏收录该内容

32 篇文章 0 订阅

订阅专栏

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

实现效果：

代码：

<!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; // 重置经过的时间为0
    stopwatchDisplay.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;