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

news2024/9/23 13:27:16

案例要求

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>