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 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="../style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
ul { list-style-image: none; }
#countdown-blog {color:#000;height:200px; margin-left: 40px;}
#countdown-blog div.set{float:left}
#countdown-blog h2{text-align:center; font-size:18px}
#countdown-blog ul{list-style-type:none;height:103px;padding:20px 0px 5px}
#countdown-blog li{float:left;background:url(filmstrip_countdown_9-0.png) 0 0 no-repeat;width:53px;height:103px}
#countdown-blog li#s0, li#m0{background:url(filmstrip_countdown_5-0.png) 0 0 no-repeat}
#countdown-blog li#h0{background:url(filmstrip_countdown_2-0.png) 0 0 no-repeat}
#countdown-blog li.comma{background:url(comma.png) 2px 75px no-repeat;width:12px}
#countdown-blog div.separator{float:left; font:80px Arial,sans-serif; height:103px; padding:25px 0 0;}
</style>
</head>
<body>
<div id="countdown-blog"></div>
<script type="text/javascript">
//<![CDATA[
// SET TARGET DATE HERE
var target = 'February 28, 2014';
// That's all you need to do.
/************************************************************************/
// Initial digit position for each number graphic
// 9-0
var initialPosCountdown = [-5562, -4944, -4326, -3708, -3090, -2472, -1854, -1236, -618, 0];
// 5-0 (first minute and second digit)
var initialMidPosCountdown = [-3090, -2472, -1854, -1236, -618, 0];
// 2-0 (first hour digit)
var initialSmallPosCountdown = [-1236, -618, 0];
var classNamesCountdown = ['jours', 'heures', 'minutes', 'secondes'];
var idNamesCountdown = ['d', 'h', 'm', 's'];
var animationFramesCountdown = 5;
var frameShiftCountdown = 103;
// If no number in URL (?date=1/1/11), then use default one
target = (window.location.search == "") ? target : window.location.search.substring(6);
// Starting numbers
var nowCountdown = new Date().getTime();
var endCountdown = Date.parse(target);
// Fix if date is in past
if (endCountdown < nowCountdown){
}
var theDiffCountdown = endCountdown-nowCountdown;
var theDiffStringCountdown = getTimeStringCountdown(theDiffCountdown);
// Increment (count one second at a time)
var incrementCountdown = 1000;
// Pace of counting in milliseconds (refresh digits every second)
var paceCountdown = 1000;
// Function that controls counting
function doCountCountdown(){
var x = getTimeStringCountdown(theDiffCountdown);
theDiffCountdown -= incrementCountdown;
var y = getTimeStringCountdown(theDiffCountdown);
// For debugging
//console.log(y);
digitCheckCountdown(x,y);
}
// This checks the old value vs. new value, to determine how many digits need to be animated.
function digitCheckCountdown(x,y){
var a = x.split(':');
var b = y.split(':');
for (var i = 0, c = a.length; i < c; i++){
if (a[i].length < 2) a[i] = '0' + a[i];
if (b[i].length < 2) b[i] = '0' + b[i];
var countA = a[i].toString().length;
var countB = b[i].toString().length;
if (countB < countA) removeDigitCountdown(i, countB);
for (var j = 0; j < countB; j++){
if (b[i].charAt(j) != a[i].charAt(j)){
var which = idNamesCountdown[i] + j;
animateDigitCountdown(which, a[i].charAt(j), b[i].charAt(j));
}
}
}
}
// Function to break the time into day:hour:minute:second
function getTimeStringCountdown(d){
var diff = d;
var days = Math.floor(diff / 86400000);
diff -= days * 86400000;
var hours = Math.floor(diff / 3600000);
diff -= hours * 3600000;
var minutes = Math.floor(diff / 60000);
diff -= minutes * 60000;
var seconds = Math.floor(diff / 1000);
if ((days==0) && (hours==0) && (minutes==0) && (seconds==0))
{
window.location.replace("test.php");
}
return days + ':' + hours + ':' + minutes + ':' + seconds;
}
// Looks in correct array to get the digit's position
function getPosCountdown(id, digit){
if (id == 's0' || id == 'm0'){
return initialMidPosCountdown[digit];
}
else if (id == 'h0'){
return initialSmallPosCountdown[digit];
}
else{
return initialPosCountdown[digit];
}
}
// Animation function
function animateDigitCountdown(which, oldDigit, newDigit){
var speed = 80;
var pos = getPosCountdown(which, oldDigit);
var newPos = getPosCountdown(which, newDigit);
// Each animation is 5 frames long, and 103px down the background image.
// We delay each frame according to the speed above.
for (var k = 0; k < animationFramesCountdown; k++){
pos -= frameShiftCountdown;
if (k == (animationFramesCountdown - 1)){
$("#" + which).delay(speed).animate({'background-position': '0 ' + pos + 'px'}, 0, function(){
// At end of animation, shift position to new digit.
$("#" + which).css({'background-position': '0 ' + newPos + 'px'}, 0);
});
}
else{
$("#" + which).delay(speed).animate({'background-position': '0 ' + pos + 'px'}, 0);
}
}
}
// Remove digit
function removeDigitCountdown(i,count){
$("li#" + idNamesCountdown[i] + count).remove();
}
// Sets the correct digits on load
function initialDigitCheckCountdown(initial){
// Creates the html
var a = initial.split(':');
for (var i = 0, c = a.length; i < c; i++){
if (a[i].length < 2) a[i] = '0' + a[i];
var count = a[i].toString().length;
var html = '<div class="set"><ul class="' + classNamesCountdown[i] + '">';
var bit = count;
for (var j = 0; j < count; j++){
bit--;
html += '<li id="' + idNamesCountdown[i] + j + '"></li>';
if (bit != 0 && bit != (count) && bit % 3 == 0) html += '<li class="comma"></li>';
}
html += '</ul><h2>' + classNamesCountdown[i].toUpperCase() + '</h2>';
// If you don't like the ':' separator, remove the following line
if (i != 3) html += '</div><div class="separator">:</div>';
//
$("#countdown-blog").append(html);
}
// Sets digits to the right number
for (var n = 0, cn = a.length; n < cn; n++){
count = a[n].toString().length;
for (var m = 0; m < count; m++){
var thisID = idNamesCountdown[n] + m;
var thisPos = getPosCountdown(thisID, a[n].charAt(m));
$("#" + idNamesCountdown[n] + m).css({'background-position': '0 ' + thisPos + 'px'});
}
}
}
// Start it up
initialDigitCheckCountdown(theDiffStringCountdown);
setInterval(doCountCountdown, paceCountdown);
//]]>
</script>
</body>
</html> |
Partager