Scribd Logo
Upload

Welcome to Scribd!

  • Countdown Timer

    Uploaded by

    info
    1 views2 pages
    Countdown timer code

    Copyright

    © © All Rights Reserved

    Available Formats

    RTF, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Countdown timer code

    Copyright:

    © All Rights Reserved
    Download as RTF, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as rtf, pdf, or txt
    1 views2 pages

    Countdown Timer

    Uploaded by

    info
    Countdown timer code

    Copyright:

    © All Rights Reserved
    Download as RTF, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as rtf, pdf, or txt
    of 2

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Day Countdown</title>
    <style>
    body {
    text-align: center;
    font-family: Arial, sans-serif;
    color: white; /* Sets the text color to white */
    }

    #timer {
    font-size: 36px;
    font-weight: bold;
    display: inline-block;
    }

    .time-unit {
    background-color: rgba(80, 80, 80, 0.5); /* Slightly transparent background */
    margin: 5px;
    display: inline-block;
    width: 100px; /* Width of each box */
    padding: 10px;
    border-radius: 5px; /* Rounded corners for the boxes */
    }

    .time-unit span {
    color: white; /* Text color inside the box */
    }

    .label {
    display: block;
    font-size: 0.8em;
    }
    </style>
    </head>
    <body>

    <div id="countdownTimer">
    <p></p>
    <div id="timer">
    <div class="time-unit"><span id="days">00</span><span class="label">Days</span></div>
    <div class="time-unit"><span id="hours">00</span><span class="label">Hours</span></div>
    <div class="time-unit"><span id="minutes">00</span><span class="label">Min</span></div>
    <div class="time-unit"><span id="seconds">00</span><span class="label">Sec</span></div>
    <!-- Removing milliseconds for consistency with your input -->
    </div>
    </div>

    <script>
    // Set the date we're counting down to (8th February 2024)
    let countdownDate = new Date("Feb 8, 2024 17:00:00").getTime();

    function updateCountdown() {
    let now = new Date().getTime();
    let distance = countdownDate - now;

    let days = Math.floor(distance / (1000 * 60 * 60 * 24));


    let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById("days").innerText = days.toString().padStart(2, '0');


    document.getElementById("hours").innerText = hours.toString().padStart(2, '0');
    document.getElementById("minutes").innerText = minutes.toString().padStart(2, '0');
    document.getElementById("seconds").innerText = seconds.toString().padStart(2, '0');

    if (distance < 0) {
    clearInterval(interval);
    document.getElementById("timer").innerHTML = "EXPIRED";
    }
    }

    let interval = setInterval(updateCountdown, 1000); // Updating every second for readability


    </script>

    </body>
    </html>

    You might also like