DeveloperBreeze

Remaining Time Calculation Development Tutorials, Guides & Insights

Unlock 1+ expert-curated remaining time calculation tutorials, real-world code snippets, and modern dev strategies. From fundamentals to advanced topics, boost your remaining time calculation skills on DeveloperBreeze.

Creating a Countdown Timer with JavaScript

Tutorial October 24, 2024
php 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Timer</title>
    <style>
        #clockdiv {
            font-family: sans-serif;
            color: #333;
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        #clockdiv div {
            font-size: 30px;
        }
    </style>
</head>
<body>

<div id="clockdiv">
    <div><span class="days"></span> Days</div>
    <div><span class="hours"></span> Hours</div>
    <div><span class="minutes"></span> Minutes</div>
    <div><span class="seconds"></span> Seconds</div>
</div>

<script>
    function getTimeRemaining(endtime) {
        const total = Date.parse(endtime) - Date.now();
        const seconds = Math.floor((total / 1000) % 60);
        const minutes = Math.floor((total / 1000 / 60) % 60);
        const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
        const days = Math.floor(total / (1000 * 60 * 60 * 24));

        return { total, days, hours, minutes, seconds };
    }

    function initializeClock(id, endtime) {
        const clock = document.getElementById(id);
        const daysSpan = clock.querySelector('.days');
        const hoursSpan = clock.querySelector('.hours');
        const minutesSpan = clock.querySelector('.minutes');
        const secondsSpan = clock.querySelector('.seconds');

        function updateClock() {
            const t = getTimeRemaining(endtime);

            daysSpan.innerHTML = t.days;
            hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
            minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
            secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

            if (t.total <= 0) {
                clearInterval(timeinterval);
            }
        }

        updateClock();
        const timeinterval = setInterval(updateClock, 1000);
    }

    let date = new Date();
    let count;
    if (date.getDate() >= 20) {
        count = date.getMonth() + 2;
    } else {
        count = date.getMonth() + 1;
    }
    let year = date.getFullYear();
    let date_str = `${year}-${count.toString().padStart(2, '0')}-20T23:59:59`;
    let deadline = new Date(date_str);

    initializeClock('clockdiv', deadline);
</script>

</body>
</html>

This tutorial has demonstrated how to create a countdown timer using JavaScript. By calculating the remaining time until a specified deadline, we can continuously update the display with days, hours, minutes, and seconds. This approach is adaptable for various use cases, such as event countdowns, sale timers, or promotional offers.

Read More