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
| 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 |
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.
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';
}
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent