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.
0 comments