https://mcconline.org.in/js/jquery.countdown.js

1/**
2 * @name		jQuery Countdown Plugin
3 * @author		Martin Angelov
4 * @version 	1.0
5 * @url			http://tutorialzine.com/2011/12/countdown-jquery/
6 * @license		MIT License
7 */
8
9(function($){
10	
11	// Number of seconds in every time division
12	var days	= 24*60*60,
13		hours	= 60*60,
14		minutes	= 60;
15	
16	// Creating the plugin
17	$.fn.countdown = function(prop){
18		
19		var options = $.extend({
20			callback	: function(){},
21			timestamp	: 0
22		},prop);
23		
24		var left, d, h, m, s, positions;
25
26		// Initialize the plugin
27		init(this, options);
28		
29		positions = this.find('.position');
30		
31		(function tick(){
32			
33			// Time left
34			left = Math.floor((options.timestamp - (new Date())) / 1000);
35			
36			if(left < 0){
37				left = 0;
38			}
39			
40			// Number of days left
41			d = Math.floor(left / days);
42			updateDuo(0, 1, d);
43			left -= d*days;
44			
45			// Number of hours left
46			h = Math.floor(left / hours);
47			updateDuo(2, 3, h);
48			left -= h*hours;
49			
50			// Number of minutes left
51			m = Math.floor(left / minutes);
52			updateDuo(4, 5, m);
53			left -= m*minutes;
54			
55			// Number of seconds left
56			s = left;
57			updateDuo(6, 7, s);
58			
59			// Calling an optional user supplied callback
60			options.callback(d, h, m, s);
61			
62			// Scheduling another call of this function in 1s
63			setTimeout(tick, 1000);
64		})();
65		
66		// This function updates two digit positions at once
67		function updateDuo(minor,major,value){
68			switchDigit(positions.eq(minor),Math.floor(value/10)%10);
69			switchDigit(positions.eq(major),value%10);
70		}
71		
72		return this;
73	};
74
75
76	function init(elem, options){
77		elem.addClass('countdownHolder');
78
79		// Creating the markup inside the container
80		$.each(['Days','Hours','Minutes','Seconds'],function(i){
81			var boxName;
82			if(this=="Days") {
83				boxName = "DAYS";
84			}
85			else if(this=="Hours") {
86				boxName = "Hours";
87			}
88			else if(this=="Minutes") {
89				boxName = "Minutes";
90			}
91			else {
92				boxName = "Seconds";
93			}
94			$('<div class="count'+this+'">' +
95				'<span class="position">' +
96					'<span class="digit static">0</span>' +
97				'</span>' +
98				'<span class="position">' +
99					'<span class="digit static">0</span>' +
100				'</span>' +
101				'<span class="boxName">' +
102					'<span class="'+this+'">' + boxName + '</span>' +
103				'</span>'
104			).appendTo(elem);
105			
106			if(this!="Seconds"){
107				elem.append('<span class="points">:</span><span class="countDiv countDiv'+i+'"></span>');
108			}
109		});
110
111	}
112
113	// Creates an animated transition between the two numbers
114	function switchDigit(position,number){
115		
116		var digit = position.find('.digit')
117		
118		if(digit.is(':animated')){
119			return false;
120		}
121		
122		if(position.data('digit') == number){
123			// We are already showing this number
124			return false;
125		}
126		
127		position.data('digit', number);
128		
129		var replacement = $('<span>',{
130			'class':'digit',
131			css:{
132				top:0,
133				opacity:0
134			},
135			html:number
136		});
137		
138		// The .static class is added when the animation
139		// completes. This makes it run smoother.
140		
141		digit
142			.before(replacement)
143			.removeClass('static')
144			.animate({top:0,opacity:0},'fast',function(){
145				digit.remove();
146			})
147
148		replacement
149			.delay(100)
150			.animate({top:0,opacity:1},'fast',function(){
151				replacement.addClass('static');
152			});
153	}
154})(jQuery);