1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
| function getSecondsOfCurrentDay(day){
return ((day=new Date()).getHours()*60+day.getMinutes())*60+day.getSeconds();
}
// Array to hold each digit's starting background-position Y value
var initialPosPad = [0, -618, -1236, -1854, -2472, -3090, -3708, -4326, -4944, -5562];
// Amination frames
var animationFramesPad = 5;
// Frame shift
var frameShiftPad = 103;
// Starting number
var theNumberPad = Math.ceil(getSecondsOfCurrentDay()*(1700000000000/86400));
// Increment
var incrementPad = Math.ceil(1700000000000/86400);
// Pace of counting in milliseconds
var pacePad = 200;
// Initializing variables
var digitsOldPad = [], digitsNewPad = [], subStartPad, subEndPad, xPad, yPad;
// Function that controls counting
function doCountPad(){
// In this example, we're padding the numbers
var x = pad(theNumberPad.toString());
theNumberPad += incrementPad;
var y = pad(theNumberPad.toString());
digitCheckPad(x,y);
}
// This checks the old count value vs. new value, to determine how many digits
// have changed and need to be animated.
function digitCheckPad(xPad,yPad){
if (yPad.length > xPad.length) addDigitPad(yPad.length);
var digitsOldPad = splitToArrayPad(xPad),
digitsNewPad = splitToArrayPad(yPad);
for (var i = 0, c = digitsNewPad.length; i < c; i++){
if (digitsNewPad[i] != digitsOldPad[i]){
animateDigitPad(i, digitsOldPad[i], digitsNewPad[i]);
}
}
}
// Animation function
function animateDigitPad(nPad, oldDigitPad, newDigitPad){
// I want three different animations speeds based on the digit,
// because the pace and increment is so high. If it was counting
// slower, just one speed would do.
// 1: Changes so fast is just like a blur
// 2: You can see complete animation, barely
// 3: Nice and slow
var speedPad;
switch (nPad){
case 0:
speedPad = pacePad/8;
break;
case 1:
speedPad = pacePad/4;
break;
default:
speedPad = pacePad/2;
break;
}
// Cap on slowest animation can go
speedPad = (speedPad > 100) ? 100 : speedPad;
// Get the initial Y value of background position to begin animation
var posPad = initialPosPad[oldDigitPad];
// Each animation is 5 frames long, and 103px down the background image.
// We delay each frame according to the speed we determined above.
for (var k = 0; k < animationFramesPad; k++){
posPad = posPad - frameShiftPad;
if (k == (animationFramesPad - 1)){
$("#pad" + nPad).delay(speedPad).animate({'background-position': '0 ' + posPad + 'px'}, 0, function(){
// At end of animation, shift position to new digit.
$("#pad" + nPad).css({'background-position': '0 ' + initialPosPad[newDigitPad] + 'px'}, 0);
});
}
else{
$("#pad" + nPad).delay(speedPad).animate({'background-position': '0 ' + posPad + 'px'}, 0);
}
}
}
// Splits each value into an array of digits
function splitToArrayPad(input){
var digitsPad = new Array();
for (var i = 0, c = input.length; i < c; i++){
var subStartPad = input.length - (i + 1),
subEndPad = input.length - i;
digitsPad[i] = input.substring(subStartPad, subEndPad);
}
return digitsPad;
}
// Adds new digit
function addDigitPad(lenPad){
var liPad = Number(lenPad) - 1;
if (liPad % 3 == 0) $("#countdown-pad").prepend('<li class="seperator"></li>');
$("#countdown-pad").prepend('<li id="pad' + liPad + '"></li>');
$("#pad" + liPad).css({'background-position': '0 ' + initialPosPad[1] + 'px'});
}
// Sets the correct digits on load
function initialDigitCheckPad(initialPad){
// Creates the right number of digits
// In this example, we're padding the numbers
var paddedPad = pad(initialPad.toString());
var countPad = paddedPad.length;
var bitPad = 1;
for (var i = 0; i < countPad; i++){
$("#countdown-pad").prepend('<li id="pad' + i + '"></li>');
if (bitPad != (countPad) && bitPad % 3 == 0)
$("#countdown-pad").prepend('<li class="seperator"></li>');
bitPad++;
}
// Sets them to the right number
var digitsPad = splitToArrayPad(initialPad.toString());
for (var i = 0, c = digitsPad.length; i < c; i++){
$("#pad" + i).css({'background-position': '0 ' + initialPosPad[digitsPad[i]] + 'px'});
}
}
// Generates a good random number
// <a href="http://www.electrictoolbox.com/pad-number-zeroes-javascript/" target="_blank">http://www.electrictoolbox.com/pad-n...es-javascript/</a>
function pad(str, length) {
var size = 11; // For 72 billion
while (str.length < size) {
str = '0' + str;
}
return str;
}
// Start it up
initialDigitCheckPad(theNumberPad);
setInterval(doCountPad, pacePad); |
