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.5k

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

15k
Music Player

Author:
Abhijit Sen

2 years ago

17k
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.8k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

175
Multi-Step Form Wizard
Working Multi-Step Form more complex forms. made with tailwind CSS v3 and javascript

Author:
Quentin Rivers

1 year ago

6k
Number counter input

Author:
Prem..

2 years ago

16.1k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

1 year ago

1.8k
Play Music - Reproductor
Multimedia music player, with its respective dark mode

Author:
Ameth Galarcio

1 year ago

2.4k
WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

2 years ago

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

Author:
Alok

2 years ago

18.4k
"Coming Soon" landing page with countdown timer

Author:
Prajwal Hallale

2 years ago

6.4k
Progress bar with Tailwind CSS and Javascript
How to a create a scroll progress bar with Tailwind CSS and Javascript

Author:
Michael Andreuzza

1 year ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components