Home > Article > Web Front-end > How to create timer Counter with Html, Css, and Javascript.

How to create timer Counter with Html, Css, and Javascript.

Mary-Kate OlsenOriginal: 2024-10-10 11:13:301098browse

Building a timer counter is a great way to understand the interaction between HTML, CSS, and JavaScript. This post will guide you through the process of creating a simple timer that starts counting when a user clicks a button. The timer will display the elapsed time in hours, minutes, and seconds.

Step 1: HTML Structure

Start by creating the basic HTML structure. You need a div to display the timer and a button to start it. Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timer Counter</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Timer Counter</h1>
        <div id="timer">00:00:00</div>
        <button id="startButton">Start Timer</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

In this HTML file:

A div with id="timer" is used to display the timer.
A button with id="start Button" is used to start the timer.

Step 2: CSS Styling

Next, style the HTML elements to create a visually appealing interface. Feel free to style it to your liking.

/* styles.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
}

#timer {
    font-size: 3rem;
    margin-bottom: 20px;
}

button {
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
}

This CSS file:

Centers the content both vertically and horizontally.
Styles the timer display with a large font size.
Adds padding and styling to the button to make it more clickable.

Step 3: JavaScript Logic

Finally, add the JavaScript to handle the timer functionality. This includes starting the timer, updating it every second, and displaying the elapsed time.

// script.js
document.addEventListener("DOMContentLoaded", () => {
    const startButton = document.getElementById("startButton");
    const timerDisplay = document.getElementById("timer");
    let timerInterval;
    let startTime;

    function startTimer() {
        startTime = new Date();
        timerInterval = setInterval(updateTimer, 1000);
    }

    function updateTimer() {
        const currentTime = new Date();
        const elapsedTime = new Date(currentTime - startTime);

        const hours = String(elapsedTime.getUTCHours()).padStart(2, '0');
        const minutes = String(elapsedTime.getUTCMinutes()).padStart(2, '0');
        const seconds = String(elapsedTime.getUTCSeconds()).padStart(2, '0');

        timerDisplay.textContent = `${hours}:${minutes}:${seconds}`;
    }

    startButton.addEventListener("click", startTimer);
});

This JavaScript file:

Waits for the DOM to load before executing.
Defines the startTimer function to initialize the start time and set an
interval to update the timer every second.
Defines the updateTimer function to calculate the elapsed time, format
it, and update the timer display.
Adds an event listener to the button to start the timer when clicked.

Bonus:

Hide the start button and display a stop button script

// script.js
document.addEventListener("DOMContentLoaded", () => {
    const startButton = document.getElementById("startButton");
    const stopButton = document.getElementById("stopButton");
    const timerDisplay = document.getElementById("timer");
    let timerInterval;
    let startTime;

    function startTimer() {
        startTime = new Date();
        timerInterval = setInterval(updateTimer, 1000);
        startButton.style.display = "none";
        stopButton.style.display = "inline-block";
    }

    function stopTimer() {
        clearInterval(timerInterval);
        startButton.style.display = "inline-block";
        stopButton.style.display = "none";
    }

    function updateTimer() {
        const currentTime = new Date();
        const elapsedTime = new Date(currentTime - startTime);

        const hours = String(elapsedTime.getUTCHours()).padStart(2, '0');
        const minutes = String(elapsedTime.getUTCMinutes()).padStart(2, '0');
        const seconds = String(elapsedTime.getUTCSeconds()).padStart(2, '0');

        timerDisplay.textContent = `${hours}:${minutes}:${seconds}`;
    }

    startButton.addEventListener("click", startTimer);
    stopButton.addEventListener("click", stopTimer);
});

The above is the detailed content of How to create timer Counter with Html, Css, and Javascript.. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html for format Interface finally Event function dom this display padding

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Building a Responsive Grid Layout with Tailwind CSSNext article：Building a Responsive Grid Layout with Tailwind CSS

See more

How to create timer Counter with Html, Css, and Javascript.

Related articles