jQuery-Countdown-Timer

Easy and dynamic time countdown system

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="src/countdown.js"></script>

<div class="count_down" d-date="April 14, 2017 11:50:00"></div>
<div class="count_down" d-date="April 15, 2017 11:50:00"></div>

Initializing plugin

 $('.count_down').countdown();

0D:09H:47M:18S
0D:21H:48M:32S

Optional plugin configurations on initialization

day	object	The attributes that will be rendered to the day html element. 'text' attribute will be appended to the current day(s)
hour	object	The attributes that will be rendered to the hour html element. 'text' attribute will be appended to the current hour(s)
minute	object	The attributes that will be rendered to the minute html element. 'text' attribute will be appended to the current minute(s)
second	object	The attributes that will be rendered to the second html element. 'text' attribute will be appended to the current second(s)
update	number : 1000	The time update rate(milliseconds)
placeholder	string : d-date	The attribute name of the html element where end date is stored and will be compared from
date	string	For some reasons you don't want to pass your countdown date to a placeholder, or you want a global date for all countdown element, then you can pass the end date as a value to this index
onComplete	function	A function that will be called when time elapses. This function accepts a single argument which is the object of the current html element that countdown is being rendered in

Date usage approaches

Note: doing this:

<div class="count_down" m-date="April 15, 2017 11:50:00"></div>

$('.count_down').countdown({placeholder: 'm-date'});

Is same as:

<div class="count_down"></div>

$('.count_down').countdown({date: 'April 15, 2017 11:50:00'});

Though each approach have its ups/downs.

Configuration work though

By default

 $('.count_down').countdown();

outputs: 2D:10H:27M:46S

 $('.count_down').countdown({
     day: {
         text: 'Days ',
     },
     hour: {
         text: 'Hours ',
     },
     minute: {
         text: 'Minutes ',
     },
     second: {
         text: 'Seconds',
     },
 });

outputs: 2Days 10Hours 27Minutes 46Seconds.
And yes, you can get more creative with the configurations.

$('.count_down').countdown({
    day: {
        class: 'day-class',
        id: 'day-id',
        style: 'color:red'
    },
    hour: {
        text: 'H: ',
        style: 'color:green;'
    },
    minute: {
        text: 'M: ',
        style: 'color:black;'
    },
    second: {
        text: 'S ',
        style: 'color:black;'
    },
    update: 1000,
    placeholder: 'd-date',
    date: 'April 15, 2017 11:50:20',
    onComplete: function (e) {
        e.addClass('expired');
        return 'Expired';
    }
});