jQuery multiple countdowns plugin
"Sami's countdown" is my simple and easy to use jQuery timer plugin. It allowes you to set timers in multipe containers wich makes it realy useful in web pages with multiple time limited offers. The plugin gets its start time from the HTML containers so it's realy easy to set the start time using your backend programing language.
It also has a callback function in case of need. You can find the usage example here and the plugin code bellow:
Java script usage example:
// Sami's countdown usage example
$(".js_timer").samis_countdown({
hours_holder: 'js_h', // The class of the hours container
minutes_holder: 'js_m', // The class of the minutes container
seconds_holder: 'js_s', // The class of the seconds container
callback_function : function(element){
console.log(element.prepend('Countdown complete'));
}, // The callback function resives one parameter - the timer container element as object
});
HTML usage example:
<div class="js_timer">
<div>Timer 1:</div>
<span class="js_h">00</span>
<span class="js_m">00</span>
<span class="js_s">15</span>
</div>
<div class="js_timer">
<div>Timer 2:</div>
<span class="js_h">01</span>
<span class="js_m">02</span>
<span class="js_s">03</span>
</div>
And the plugin:
/**
* Sami's countdown v.1.0
* Decreases the html content of elements that contain the hours, minutes and seconds
* NOTE: requires jQuery
* @param object element - The object that contains the hours, minutes and seconds containers
* @author Samuil Banti - http://samiwell.eu
* @copyright (C) 2015 - Samuil Banti
* @license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
* @return NULL if timer is running FALSE if its done
*/
(function( $ ){
$.fn.samis_countdown = function( options ) {
// Create some defaults, extending them with any options that were provided
var settings = $.extend( {
hours_holder: 'js_h', // The class of the hours container
minutes_holder: 'js_m', // The class of the minutes container
seconds_holder: 'js_s', // The class of the seconds container
callback_function : false, // The callback function resives one parameter - the timer container element as object
}, options);
return this.each(function() {
$.fn.samis_countdown.settings = settings;
var element = $(this);
countdown($(this));
});
function countdown(element) {
var hours_box = element.find('.'+settings.hours_holder);
var mins_box = element.find('.'+settings.minutes_holder);
var secs_box = element.find('.'+settings.seconds_holder);
var hours = parseInt(hours_box.html());
var mins = parseInt(mins_box.html());
var secs = parseInt(secs_box.html());
if(hours==0 && mins==0 && secs==0) {
if(settings.callback_function.length) {
settings.callback_function(element);
}
return false;
}
secs -= 1;
if(secs < 0) {
if(mins > 0 || hours > 0) {
secs = 59;
mins -= 1;
if(mins < 0) {
if(hours > 0) {
hours -= 1;
}
if(hours >= 0) {
mins = 59;
} else {
mins = 0;
}
}
} else {
secs = 0;
}
}
hours_box.html(pad(hours, 2));
mins_box.html(pad(mins, 2));
secs_box.html(pad(secs, 2));
setTimeout(function(){countdown(element)},1000);
}
function pad(num, size) {
var s = num+"";
while (s.length < size) s = "0" + s;
return s;
}
};
})( jQuery );
Download...