Last Updated:

Countdown timer using Javascript

Almost every selling landing page uses a countdown timer that informs you about the end date of a certain promotion. With the help of this article, you will figure out how to make such a timer and how the script works that provides a countdown in the opposite direction until the end of the day. Actually, that's why it's called a "countdown timer." Naturally, we will write the code in pure JavaScript.

HTML countdown timer markup.

The layout itself is very simple and does not require special comments:

A couple of comments to the presented HTML layout:
In the block, with the help of an unmarked list, the countdown timer itself is displayed, counting down hours, minutes and seconds.
The list displays the names of the timer elements.<div class="timer"><div><UL><ul class="flex time-name"></ul>

Style sheet for countdown timer

We will not consider the layout and style sheet in more detail, because our main task is to study the work of the js-script that ensures the operation of the countdown timer.
One small addition. Using a style, a colon is displayed that separates hours, minutes, and seconds..timer li + li:before

JavaScript control the countdown timer.

To limit the scope, let's place the script in an anonymous self-starting function.

Let's declare a few variables and assign values to them:

The timer reading is generated by the function , whose argument is an array .
The function is based on an internal timer-scheduler that runs the code for counting the countdown timer once per second. The values are displayed by using a function whose arguments are the hours, minutes, and seconds that result from .timertimestimersetIntervalshowTimertimer

So, let's start the countdown timer:

Function Code :timer

And finally, the code of the function that displays the current timer value on the screen. The arguments to this function will be the calculated values of hours, minutes, and seconds:

That's the whole countdown timer code. As you can see, there is absolutely nothing complicated here, as well as there is no need to connect the jQuery library to implement it.