root / drupal7 / sites / all / modules / jquery_countdown_timer / js / jquery_countdown_timer.js @ fc2c1c7a
1 | 85ad3d82 | Assos Assos | /**
|
---|---|---|---|
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 | $('<span class="count'+this+'">'+ |
||
82 | '<span class="position">'+
|
||
83 | '<span class="digit static">0</span>'+
|
||
84 | '</span>'+
|
||
85 | '<span class="position">'+
|
||
86 | '<span class="digit static">0</span>'+
|
||
87 | '</span>'+
|
||
88 | '</span>').appendTo(elem);
|
||
89 | |||
90 | if(this!="Seconds"){ |
||
91 | elem.append('<span class="countDiv countDiv'+i+'"></span>'); |
||
92 | } |
||
93 | }); |
||
94 | |||
95 | } |
||
96 | |||
97 | // Creates an animated transition between the two numbers
|
||
98 | function switchDigit(position,number){ |
||
99 | |||
100 | var digit = position.find('.digit') |
||
101 | |||
102 | if(digit.is(':animated')){ |
||
103 | return false; |
||
104 | } |
||
105 | |||
106 | if(position.data('digit') == number){ |
||
107 | // We are already showing this number
|
||
108 | return false; |
||
109 | } |
||
110 | |||
111 | position.data('digit', number);
|
||
112 | |||
113 | var replacement = $('<span>',{ |
||
114 | 'class':'digit', |
||
115 | css:{
|
||
116 | top:'-2.1em', |
||
117 | opacity:0 |
||
118 | }, |
||
119 | html:number
|
||
120 | }); |
||
121 | |||
122 | // The .static class is added when the animation
|
||
123 | // completes. This makes it run smoother.
|
||
124 | |||
125 | digit |
||
126 | .before(replacement) |
||
127 | .removeClass('static')
|
||
128 | .animate({top:'2.5em',opacity:0},'fast',function(){ |
||
129 | digit.remove(); |
||
130 | }) |
||
131 | |||
132 | replacement |
||
133 | .delay(100)
|
||
134 | .animate({top:0,opacity:1},'fast',function(){ |
||
135 | replacement.addClass('static');
|
||
136 | }); |
||
137 | } |
||
138 | })(jQuery); |