当前位置：首页 > news >正文

前端实现简易计时器

news 2025/5/8 14:36:31

前端实现简易计时器

<!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 = 0let 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 = truestopTiming.disabled = false})stopTiming.addEventListener('click', () => {clearInterval(timer)startTiming.disabled = falsestopTiming.disabled = true})resetTiming.addEventListener('click', () => {count = 0const timeStr = formatTime(count)time.innerHTML = timeStrclearInterval(timer)startTiming.disabled = falsestopTiming.disabled = true})</script>
</body></html>