Last active
December 11, 2015 23:19
-
-
Save deep-spaced/4675870 to your computer and use it in GitHub Desktop.
A jQuery Countdown plugin.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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 ); |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Use like this. Months should be passed normal date months, such as June = 6.
$(".countdownContainer").countdown({year: 2013, month: 6, day: 17});