Skip to content

Instantly share code, notes, and snippets.

@deep-spaced
Last active December 11, 2015 23:19
Show Gist options
  • Select an option

  • Save deep-spaced/4675870 to your computer and use it in GitHub Desktop.

Select an option

Save deep-spaced/4675870 to your computer and use it in GitHub Desktop.
A jQuery Countdown plugin.
// Countdown.js
// A plugin to generate a countdown to a date.
// version 1.0, January 2013
// by Andrew Anderson
;(function ( $, window, document, undefined ) {
var pluginName = "countdown",
defaults = {
year: "",
month: "",
day: "",
labels: true,
includeMS: true
};
function Countdown( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Countdown.prototype = {
init: function() {
// Create the DOM elements.
$container = $(document.createElement('div')).addClass('rd_countdown_container').append(
$('<span class="days countdown_time"></span> <span class="day_label countdown_label">Days</span> '+
'<span class="hours countdown_time"></span> <span class="hour_label countdown_label">Hours</span> '+
'<span class="minutes countdown_time"></span> <span class="minute_label countdown_label">Minutes</span> ' +
'<span class="seconds countdown_time"></span> <span class="second_label countdown_label">Seconds</span> '+
'<span class="ms countdown_time"></span> <span class="ms_label countdown_label">ms</span>'
)
);
// Initiate the settings.
if(this.options.labels === false) { $container.children('.countdown_label').hide(); }
if(this.options.includeMS === false) { $container.children('.ms, .ms_label').hide(); }
// Insert into the element, replacing all child nodes:
$(this.element).html($container);
// Convert the date. Note the subtraction of 1 from the month to convert to index of 0.
this.options.endDate = new Date(this.options.year, this.options.month - 1, this.options.day);
// Start the timer.
this.intervalTimer = setInterval($.proxy(this._updateCountdown, this), 75);
},
_updateCountdown: function(e) {
var x = 0;
var ms = this.options.endDate - new Date();
x = ms / 1000;
var sec = Math.floor(x % 60);
x = x / 60;
var min = Math.floor(x % 60);
x = x / 60;
var hr = Math.floor(x % 24);
var day = Math.floor(x / 24);
$('.rd_countdown_container .days').text(day);
$('.rd_countdown_container .hours').text(hr);
$('.rd_countdown_container .minutes').text(min);
$('.rd_countdown_container .seconds').text(sec);
$('.rd_countdown_container .ms').text(this._pad(ms % 1000, 3));
},
_pad: function(num, size) {
var s = "000000000" + num;
return s.substr(s.length-size);
},
stop: function() {
clearInterval(this.intervalTimer);
}
};
$.fn[pluginName] = function ( options ) {
var args = arguments;
if (options === undefined || typeof options === 'object') {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Countdown( this, options ));
}
});
} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
return this.each(function () {
var instance = $.data(this, 'plugin_' + pluginName);
if (instance instanceof Countdown && typeof instance[options] === 'function') {
instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) );
}
});
}
};
})( jQuery, window, document );
@deep-spaced
Copy link
Copy Markdown
Author

Use like this. Months should be passed normal date months, such as June = 6.

$(".countdownContainer").countdown({year: 2013, month: 6, day: 17});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment