前端实现简易计时器

新时代农民工Top

已于 2025-05-07 14:45:27 修改

阅读量471

点赞数 4

CC 4.0 BY-SA版权

文章标签：前端

于 2025-05-07 14:44:55 首次发布

本文链接：https://blog.youkuaiyun.com/web00_11/article/details/147765188

前端实现简易计时器

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	</style>
</head>

<body>
	<div class="box">
		<h1 class="time">00:00:00</h1>
		<div>
			<button class="start_timing">开始计时</button>
			<button class="stop_timing" disabled>停止计时</button>
			<button class="reset_timing">重置计时器</button>
		</div>
	</div>
	<script>
		const startTiming = document.querySelector('.start_timing')
		const stopTiming = document.querySelector('.stop_timing')
		const resetTiming = document.querySelector('.reset_timing')
		const time = document.querySelector('.time')

		let count = 0
		let timer = null
		// 核心代码
		const formatTime = (seconds) => {
			const hrs = Math.floor(seconds / 3600);
			const mins = Math.floor((seconds % 3600) / 60);
			const secs = Math.floor(seconds % 60);

			return [
				hrs.toString().padStart(2, '0'),
				mins.toString().padStart(2, '0'),
				secs.toString().padStart(2, '0')
			].join(':');
		};

		startTiming.addEventListener('click', () => {
			timer = setInterval(() => {
				count++
				const timeStr = formatTime(count)
				time.innerHTML = timeStr
			}, 1000)
			startTiming.disabled = true
			stopTiming.disabled = false
		})

		stopTiming.addEventListener('click', () => {
			clearInterval(timer)
			startTiming.disabled = false
			stopTiming.disabled = true
		})

		resetTiming.addEventListener('click', () => {
			count = 0
			const timeStr = formatTime(count)
			time.innerHTML = timeStr
			clearInterval(timer)
			startTiming.disabled = false
			stopTiming.disabled = true
		})
	</script>
</body>

</html>