使用JavaScript及HTML、CSS完成秒表计时器

本文主要是介绍使用JavaScript及HTML、CSS完成秒表计时器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

案例要求

1.界面为一个显示计时面板和三个按钮分别为:开始，暂停，重置
2.点击开始，面板开始计时，
3.点击暂停，面板停止
4.点击重置，计时面板重新为0

案例源码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>秒表计时器</title>
<style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;}.container {text-align: center;}#timerDisplay {font-size: 36px;margin-bottom: 20px;}.clock {width: 200px;height: 200px;border: 8px solid #007bff;border-radius: 50%;position: relative;margin-bottom: 20px;}.hand {width: 2px;background-color: #007bff;position: absolute;top: 50%;left: 50%;transform-origin: bottom center;}.hour-hand {height: 50px;}.minute-hand {height: 70px;}.second-hand {height: 80px;background-color: red;}.center-dot {width: 8px;height: 8px;background-color: #007bff;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.buttons {display: flex;justify-content: center;}.button {background-color: #007bff;color: #fff;border: none;padding: 10px 20px;cursor: pointer;margin-right: 10px;}
</style>
</head>
<body><div class="container"><div id="timerDisplay">00:00:00</div><div class="clock"><div class="hand hour-hand"></div><div class="hand minute-hand"></div><div class="hand second-hand"></div><div class="center-dot"></div></div><div class="buttons"><button id="startButton" class="button">开始</button><button id="pauseButton" class="button">暂停</button><button id="resetButton" class="button">重置</button></div>
</div><script>
var timer;
var hours = 0;
var minutes = 0;
var seconds = 0;function startTimer() {timer = setInterval(updateTimer, 1000);
}function pauseTimer() {clearInterval(timer);
}function resetTimer() {clearInterval(timer);hours = 0;minutes = 0;seconds = 0;updateDisplay();
}function updateTimer() {seconds++;if (seconds == 60) {seconds = 0;minutes++;}if (minutes == 60) {minutes = 0;hours++;}updateDisplay();updateClock();
}function updateDisplay() {var displayHours = (hours < 10) ? "0" + hours : hours;var displayMinutes = (minutes < 10) ? "0" + minutes : minutes;var displaySeconds = (seconds < 10) ? "0" + seconds : seconds;document.getElementById("timerDisplay").innerText = displayHours + ":" + displayMinutes + ":" + displaySeconds;
}function updateClock() {var hourHand = document.querySelector(".hour-hand");var minuteHand = document.querySelector(".minute-hand");var secondHand = document.querySelector(".second-hand");var hourRotation = (hours % 12) * 30 + minutes * 0.5;var minuteRotation = minutes * 6 + seconds * 0.1;var secondRotation = seconds * 6;hourHand.style.transform = `translate(-1px, -100%) rotate(${hourRotation}deg)`;minuteHand.style.transform = `translate(-1px, -100%) rotate(${minuteRotation}deg)`;secondHand.style.transform = `translate(-1px, -100%) rotate(${secondRotation}deg)`;
}document.getElementById("startButton").addEventListener("click", startTimer);
document.getElementById("pauseButton").addEventListener("click", pauseTimer);
document.getElementById("resetButton").addEventListener("click", resetTimer);
</script></body>
</html>