→ 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

9.3k

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

Music player with bootstrap 5
Animated music player design

Author:
Mateo Rojas

7 months ago

1.6k

v.5.3
Calender

Author:
Anonymous

1 year ago

965

v.4.6
Music Player
Working music player With start top buttons and progress bar

Author:
Prajwal Hallale

1 year ago

6.7k

v.5.3
bootstrap quiz template (Interactive)
Interactive MCQ Quiz show results at the end

Author:
Arturo

7 months ago

2.5k

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

8 months ago

1.3k

v.5.3
Bootstrap video player
Video player with buttons

Author:
Kemaya m

1 year ago

4.3k

v.5.3
Interactive Quiz Application
1. Dynamic Question Loading: Questions are loaded one at a time from a predefined set. 2. Timer: Each question has a 30-second time limit. Interactive Options: Users can select their answer, with visual feedback for correct and incorrect choices. 3. Progress Bar: Shows the user's progress through the quiz. 4. Results Summary: Displays the final score with a congratulatory or encouraging message. 5. Responsive Design: The quiz adapts to different screen sizes.

Author:
Ross Wille

10 months ago

6.3k

v.5.3
Timer with bootstrap

Author:
Anonymous

7 months ago

2.1k

v.5.3
Audio player with bootstrap

Author:
Arturo

7 months ago

2.7k

v.5.3
Marquee Animation
On hover stop effect

Author:
Anonymous

1 year ago

8.6k

v.5.3
Typewriter Effect

Author:
Anonymous

1 year ago

1.5k

v.4.6
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

8 months ago

1.2k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent