简单HTML计时器

不说废话

已于 2024-08-19 18:19:37 修改

阅读量56

点赞数 1

文章标签： html 前端

于 2024-08-19 18:00:05 首次发布

本文链接：https://blog.csdn.net/yabozi120511/article/details/141331497

版权

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多功能秒表</title>
    <link rel="stylesheet" href="text00.css">
</head>
<body>
    <div class="container">
        <h1>多功能秒表</h1>
        <div id="timerDisplay">00:00:00.00</div>
        <div class="buttons">
            <button id="startButton">启动</button>
            <button id="pauseButton">暂停</button>
            <button id="resetButton">重置</button>
            <button id="countButton">计次</button>
        </div>
        <div id="countDisplay"></div>
    </div>
    <script src="text00.js"></script>
</body>
</html>

CSS：

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
}

.container {
    text-align: center;
}

h1 {
    color: #333;
}

#timerDisplay {
    font-size: 3em;
    margin-bottom: 20px;
}

.buttons {
    display: flex;
    gap: 10px;
}

button {
    padding: 10px 20px;
    font-size: 1.2em;
    cursor: pointer;
    border: none;
    outline: none;
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
}

button:hover {
    background-color: #45a049;
}

Javascript ：

document.addEventListener("DOMContentLoaded", function() {
    let milliseconds = 0;
    let seconds = 0;
    let minutes = 0;
    let timestamps = []; // Array to store timestamps.
    let count = 0; // Counter for the number of counts.
    let maxCount = 30; // Maximum number of counts allowed.
    let timerId;

    const startButton = document.getElementById('startButton');
    const pauseButton = document.getElementById('pauseButton');
    const resetButton = document.getElementById('resetButton');
    const countButton = document.getElementById('countButton'); // Button for counting.
    const timerDisplay = document.getElementById('timerDisplay');
    const countDisplay = document.getElementById('countDisplay'); // Display the timestamps.

    function startTimer() {
        timerId = setInterval(function() {
            milliseconds++;
            if (milliseconds >= 100) { // Update to 100 for two decimal places.
                seconds++; // Increment seconds when milliseconds reach 100.
                milliseconds = 0; // Reset milliseconds to 0.
                if (seconds >= 60) { // Check if seconds need to be incremented.
                    minutes++;
                    seconds = 0; // Reset seconds to 0.
                }
            }
            timerDisplay.textContent = formatTime(minutes, seconds, milliseconds);
        }, 1); // Use the smallest possible interval (1 millisecond).
    }

    function pauseTimer() {
        clearInterval(timerId);
    }

    function resetTimer() {
        clearInterval(timerId);
        milliseconds = 0;
        seconds = 0;
        minutes = 0;
        timestamps = []; // Clear the timestamps array.
        count = 0; // Reset the count.
        timerDisplay.textContent = '00:00:00.00';
        updateCountDisplay(); // Clear the display.
    }

    function formatTime(minutes, seconds, milliseconds) {
        const hours = Math.floor(minutes / 60);
        const mins = minutes % 60;
        const secs = seconds;
        const msecs = milliseconds; // Ensure milliseconds are correctly formatted.
        return `${pad(hours)}:${pad(mins)}:${pad(secs)}.${pad(msecs, 2)}`;
    }

    function pad(num, digits = 2) {
        return num.toString().padStart(digits, '0');
    }

    function updateCountDisplay() {
        countDisplay.innerHTML = ''; // Clear the current content.
        timestamps.forEach(timestamp => {
            const item = document.createElement('div');
            item.textContent = timestamp; // Display the formatted time directly.
            countDisplay.appendChild(item);
        });

        // Display a message if the maximum count is reached.
        if (count === maxCount) {
            const message = document.createElement('div');
            message.textContent = '已达到最大计次次数！';
            message.style.color = 'red'; // Style the message.
            countDisplay.appendChild(message);
        }
    }

    function countTimestamp() {
        if (count < maxCount) { // Check if the maximum count has been reached.
            const currentTime = timerDisplay.textContent; // Get the current time from the display.
            timestamps.push(currentTime); // Push the formatted time.
            count++; // Increment the count.
            updateCountDisplay(); // Update the display.
        }
    }

    startButton.addEventListener('click', startTimer);
    pauseButton.addEventListener('click', pauseTimer);
    resetButton.addEventListener('click', resetTimer);
    countButton.addEventListener('click', countTimestamp); // Event listener for the count button.
});

压缩包放在最后了，使用前先点个赞