Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed
/*** @name jQuery Countdown Plugin* @author Martin Angelov* @version 1.0* @url http://tutorialzine.com/2011/12/countdown-jquery/* @license MIT License*/(function($){// Number of seconds in every time divisionvar days = 24*60*60,hours = 60*60,minutes = 60;// Creating the plugin$.fn.countdown = function(prop){var options = $.extend({callback : function(){},timestamp : 0},prop);var left, d, h, m, s, positions;// Initialize the plugininit(this, options);positions = this.find('.position');(function tick(){// Time leftleft = Math.floor((options.timestamp - (new Date())) / 1000);if(left < 0){left = 0;}// Number of days leftd = Math.floor(left / days);updateDuo(0, 1, d);left -= d*days;// Number of hours lefth = Math.floor(left / hours);updateDuo(2, 3, h);left -= h*hours;// Number of minutes leftm = Math.floor(left / minutes);updateDuo(4, 5, m);left -= m*minutes;// Number of seconds lefts = left;updateDuo(6, 7, s);// Calling an optional user supplied callbackoptions.callback(d, h, m, s);// Scheduling another call of this function in 1ssetTimeout(tick, 1000);})();// This function updates two digit positions at oncefunction updateDuo(minor,major,value){switchDigit(positions.eq(minor),Math.floor(value/10)%10);switchDigit(positions.eq(major),value%10);}return this;};function init(elem, options){elem.addClass('countdownHolder');// Creating the markup inside the container$.each(['Days','Hours','Minutes','Seconds'],function(i){var boxName;if(this=="Days") {boxName = "DAYS";}else if(this=="Hours") {boxName = "HRS";}else if(this=="Minutes") {boxName = "MNTS";}else {boxName = "SECS";}$('<div class="count'+this+'">' +'<span class="position">' +'<span class="digit static">0</span>' +'</span>' +'<span class="position">' +'<span class="digit static">0</span>' +'</span>' +'<span class="boxName">' +'<span class="'+this+'">' + boxName + '</span>' +'</span>').appendTo(elem);if(this!="Seconds"){elem.append('<span class="points">:</span><span class="countDiv countDiv'+i+'"></span>');}});}// Creates an animated transition between the two numbersfunction switchDigit(position,number){var digit = position.find('.digit')if(digit.is(':animated')){return false;}if(position.data('digit') == number){// We are already showing this numberreturn false;}position.data('digit', number);var replacement = $('<span>',{'class':'digit',css:{top:0,opacity:0},html:number});// The .static class is added when the animation// completes. This makes it run smoother.digit.before(replacement).removeClass('static').animate({top:0,opacity:0},'fast',function(){digit.remove();})replacement.delay(100).animate({top:0,opacity:1},'fast',function(){replacement.addClass('static');});}})(jQuery);