Creating a CountDown Timer Using Vanilla Javascript

By | October 20, 2015


Creating a CountDown Timer Using Vanilla Javascript

Adding a clock with JavaScript to a site can be valuable for different purposes. The commencement can be checking the days left to the official dispatch of your site, item or highlight inside of the site. Depending on outsider libraries can bring about additional weight on the data transmission include and it can lose some of your time attempting to twist the library to your will. On the off chance that everything you need is a basic commencement clock, the code included is not that much to require the inclusion of outsider scripts.

Creating a CountDown Timer Using Vanilla Javascript

Download And Demo Links are as:

How To Login With Google Account oAuth in PHPHow To Login With Google Account oAuth in PHP

To use our countdown timer, all that you are going to need to do is call the addCountdown function, pass it a date string and an element where the countdown will go and you are set. Using it looks something like this:

You need one line of JavaScript and one line that adds the element where you want it to be in the DOM:

The result is a countdown timer like this one:

Creating a CountDown Timer Using Vanilla Javascript

The visuals

We have created a simple dark skin for the countdown timer.

We float each box (there are 4 boxes – with days, hour, minutes and seconds) to the left, give fixed dimensions to the countdown timer and its boxes, make it dark and highlight the boxes with white border. We also use the default cursive font available to the system.

The logic

We create our function which accepts a date to countdown to, the id of the element which we want to hold the countdown timer and an optional array with labels for the time values. It seeks for 4 elements in the following order – days, hours, minutes, seconds. For example, if we pass it an array like: [“天”, “营业时间”, “纪要”, “秒”] the labels will be in Chinese (Simplified) as shown in the picture below:


To achieve this, we just called the addCountdown function in the following manner:

In the body of the addCountdown function we define another function called timeRemaining which will determine how many days, hours, minutes and seconds remain to the target date and return them as a string combined with the appropriate time label.

Afterwards, we define yet another function which takes the return value from the timeRemaining function and if timeRemaining has returned null we stop updating the clock every second and remove the countdown container (it returns null if the UNIX timestamp holds a negative value as checked in  if (timeRemaining > 0) )

Then, we call timeRemaining and save the return value to a variable:

Now, in our main addCountdown function we call isCountdownEnded and return from it if the result of the call to isCountdownEnded contains a truthy value:

Progressing further, we add all necessary children to the container element for the countdown timer with their appropriate value:

times is an array that comes as a result of the call to timeRemaining.

Finally, we set an interval that will call timeRemaining, stop further execution if the timer’s time is up and which will update the remaining time each second.

Thanks For Reading This Tutorial.