Countdown counter, html + javascript

July 4, 2024

Countdown counter, html + javascript is done with this code 

<div class="row align-items-start justify-content-center">
    <div class="col-md-3 col-12"><h3>Time Left Until the End of Our Promotion:</h3></div>
    <div class="col-md-1 col-2"><div id="months" class="display-4 text-danger"></div>months</div>
    <div class="col-md-1 col-2"><div id="days" class="display-4 text-danger"></div>days</div>
    <div class="col-md-1 col-2"><div id="hours" class="display-4 text-danger"></div>hours</div>
    <div class="col-md-1 col-2"><div id="minutes" class="display-4 text-danger"></div>minutes</div>
    <div class="col-md-1 col-2"><div id="seconds" class="display-4 text-danger"></div>seconds</div>
</div>
<script>
    function updateCountdown() {
        const endDate = new Date('June 15, 2024 23:59:59').getTime();
        const now = new Date().getTime();
        const timeLeft = endDate - now;
        
        const endDateObj = new Date(endDate);
        const nowDateObj = new Date(now);
        
        const years = endDateObj.getFullYear() - nowDateObj.getFullYear();
        const months = endDateObj.getMonth() - nowDateObj.getMonth() + (years * 12);
        const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)) % 30;
        const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
        
        document.getElementById('months').innerText = months;
        document.getElementById('days').innerText = days;
        document.getElementById('hours').innerText = hours;
        document.getElementById('minutes').innerText = minutes;
        document.getElementById('seconds').innerText = seconds;
    }
    
    setInterval(updateCountdown, 1000);
</script>

This script sets up a countdown timer that calculates the time remaining until the specified end date (June 15, 2024, at 23:59:59). It updates every second to display the remaining months, days, hours, minutes, and seconds dynamically. You can customize the end date and time by adjusting the endDate variable in the JavaScript part of the code.

The example uses bootstrap 4 markup and styles, but you can give this block your own styles and customize it as you wish.

Ready to assist in creating a new website starting from $250 or making changes to an existing one.
Contact us for professional support.

Contact me on Telegram: @lb_user Write by e-mail: [email protected]

Add comment