Code:
<!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>Merci pour vos commentaires !!!!
Aucun commentaire:
Enregistrer un commentaire