案例要求
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>
