Home
Alfredo Pineda Hernández
Simple count down timer

Simple count down timer

Forked from> @gopi/simple-count-down-timer

This tailwind example is contributed by Alfredo Pineda Hernández, on 11-Jul-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Timer,Time counter

Widget Countdown Timer

Author Alfredo Pineda Hernández

9.4k

Fork Fullscreen

// Update the count down every 1 second
            var x = setInterval(function() {

// Get today's date and time
                var now = new Date().getTime();

// Find the distance between now and the count down date
                var distance = countDownDate - now;

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

// Output the result in an element with id="countdown" 
                document.getElementById("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds +
                    "s ";

// If the count down is over, write some text 
                if (distance < 0) {
                    clearInterval(x);
                    document.getElementById("countdown").innerHTML = "EXPIRED";
                }
            }, 1000);
        </script>
    </div>
</div>

Related Examples

Simple count down timer

Author:
Gopi Yadav

2 years ago

14.8k
Music Player

Author:
Abhijit Sen

2 years ago

16.7k
Read more / Show more button with hide button
"hide" button that appears when the additional content is displayed:

Author:
Prajwal Hallale

2 years ago

21.4k
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

Author:
dev-fab250

1 month ago

467
Working reading progress bar
show how much of the page has been scrolled

Author:
Freja Jensen

2 years ago

12.5k
Code Block with Copy Button
this example uses clipboard.js to copy the code

Author:
Alok

2 years ago

17.8k
Working back to top button
The "Scroll to top" button becomes visible when the user starts to scroll the page Clicking on that button takes you back to the top of the page. This is a great feature to have on any website especially if your content is long.

Author:
Prashant

2 years ago

14.2k
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

2 years ago

13.7k
Coming soon page with working count down timer
Update the date according to your need

Author:
Prajwal Hallale

2 years ago

8k
pages / slides

Author:
MD Fardous Alom

5 months ago

739
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

2.1k
Interactive Kanban Board
Kanban board with draggable tasks

Author:
Quentin Rivers

8 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components