→ Moana silva
→ Countdown timer

Countdown timer

Countdown timer with js

This bootstrap css example is contributed by Moana silva, on 19-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Widget

Author Moana silva

15.9k

v.5.3

Fork Fullscreen

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0 text-center">Countdown Timer</h4>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-3">
                            <h3 id="days" class="display-4">00</h3>
                            <p>Days</p>
                        </div>
                        <div class="col-3">
                            <h3 id="hours" class="display-4">00</h3>
                            <p>Hours</p>
                        </div>
                        <div class="col-3">
                            <h3 id="minutes" class="display-4">00</h3>
                            <p>Minutes</p>
                        </div>
                        <div class="col-3">
                            <h3 id="seconds" class="display-4">00</h3>
                            <p>Seconds</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

// Update the countdown every 1 second
const x = setInterval(function() {
  // Get today's date and time
  const now = new Date().getTime();

// Find the distance between now and the countdown date
  const distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Display the result
  document.getElementById("days").innerHTML = days.toString().padStart(2, '0');
  document.getElementById("hours").innerHTML = hours.toString().padStart(2, '0');
  document.getElementById("minutes").innerHTML = minutes.toString().padStart(2, '0');
  document.getElementById("seconds").innerHTML = seconds.toString().padStart(2, '0');

// If the countdown is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("days").innerHTML = "00";
    document.getElementById("hours").innerHTML = "00";
    document.getElementById("minutes").innerHTML = "00";
    document.getElementById("seconds").innerHTML = "00";
  }
}, 1000);
</script>

More Examples