Create Countdown Timer in Efficient Way Using JavaScript

Create Countdown Timer using JavaScript

In some projects, We need a countdown timer like recently I want. I googled almost three hours to create Countdown Timer but in an efficient way. Why did I call efficient way? Just be with us you'll know the reason.

The requirement of the project is to implement more than one countdown timer in a single page. But some of the following challenges I have to face like:

  • The date was in UnixTimestamp format. So I've to convert it into a readable format.
  • Multiple countdown timers need on a single page.
  • Don't want to put javascript code in a loop for multiple timers.
  • Want very clean and simple code.

If you're also facing any of these types of problem to implement Countdown timer then you're in the right place. Now let's dive in the code and I’ll show you the code and then explain, line-by-line. 🙂

Do you know the difference between:

See More:
Promise Vs Callback function in Javascript
Difference between a promise and a callback in Javascript: Lets...

Library to implement Countdown Timer

First of all, you've to add two libraries in your <head> section.

Create Countdown Timer using JavaScript
Create Countdown Timer using JavaScript
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<scripttype="text/javascript"src="http://cdn.rawgit.com/hilios/jQuery.countdown/2.1.0/dist/jquery.countdown.min.js"></script>
After that add the magic code above of </head> section.
Magical code to Create Countdown Timer using JavaScript
Magical code to Create Countdown Timer using JavaScript
<script type="text/javascript">
    $(function(){
        $('.countdown').each(function(){
            $(this).countdown($(this).attr('value'), function(event) {
            $(this).text(event.strftime('%D:%H:%M:%S')
         );
            });
        });
    });
</script>
That's it !! Yes, coders its that simple. Now let show our countdown timer in our UI section. For that what you've to so.

Looking for Javascript animation engine:

See More:
AnimeJs a Javascript animation engine
Animejs is a lightweight JavaScript animation engine library. It can...
See More:
ScrollReveal Js A javascript library to reveal elements
ScrollReveal Js is a library used to reveal elements when...
You just need to add a single line of code:
Beauty of this code
The beauty of this code
<span class="countdown" value="2018/10/18 11:09:36"></span>
Hope you like this tutorial. Try this and comment us where you add this countdown timer in your project. You can see a demo here.
Recommended articles:
See More:
Difference between equality operators == and === in Javascript
Comparison operators in Javascript. This is equality operators. == and...