Countdown JS

JS animated countdown

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 
</head> 
 
<body> 
 
<div id="wrap"> 
<div id="container"> 
    <div class="set"> 
    <ul class="days"> 
        <li style="background-position: 20px -0px;" id="d0"></li> 
        <li style="background-position: 0pt -3090px;" id="d1"></li> 
    </ul> 
    </div> 
 
    <div class="separator"></div> 
 
    <div class="set"> 
    <ul class="hours"> 
        <li style="background-position: 0pt -1236px;" id="h0"></li> 
        <li style="background-position: 0pt -3708px;" id="h1"></li> 
    </ul> 
    </div> 
    
    <div class="separator"></div> 
    
    <div class="set"> 
    <ul class="minutes"> 
        <li style="background-position: 0pt -1854px;" id="m0"></li> 
        <li style="background-position: 0pt -2472px;" id="m1"></li> 
    </ul> 
    </div> 
    
    <div class="separator"></div> 
    
    <div class="set"> 
    <ul class="seconds"> 
        <li style="background-position: 0pt -618px;" id="s0"></li> 
        <li style="background-position: 0pt -1236px;" id="s1"></li> 
    </ul> 
    </div> 
</div> 
</div>
 
</body></html>

CSS

/* COUNTDOWN DEMO STYLING */


*{
    margin:0;padding:0
}

#wrap{
    float:right;position:relative;left:-50%;margin-top:20px
}

#container{
    position:relative;left:50%;
}

div.set{
    float:left
}

ul{
    list-style-type:none;height:103px;padding:10px 5px 5px
}

li{
    float:left;background:url(http://laurapausini.com/countdown/img/filmstrip_countdown_9-0.png) #F00 0 0 no-repeat;width:31px;height:59px
}

li#s0, li#m0{
    background:url(http://laurapausini.com/countdown/img/filmstrip_countdown_5-0.png) 0 0 no-repeat
}

li#h0{
    background:url(http://laurapausini.com/countdown/img/filmstrip_countdown_2-0.png) 0 0 no-repeat
}

div.separator{
    float:left;height:60px;padding:35px 0 0;font: 40px 'Arial, sans-serif
}

JavaScript

// SET TARGET DATE HERE
var target = 'April 11, 2011';

// That's all you need to do.

/************************************************************************/
// Initial digit position for each number graphic
// 9-0
//                0     1      2       3      4      5      6      7     8     9
var initialPos = [-3254, -2892, -2531, -2169, -1808, -1446, -1085, -723, -362, 0];

var d0 = -361.55;
var initialPos = [d0*9, d0*8, d0*7, d0*6, d0*5, d0*4, d0*3, d0*2, d0*1, 0];
// 5-0 (first minute and second digit)
var initialMidPos = [-1808, -1446, -1085, -723, -362, 0];
// 2-0 (first hour digit)
var initialSmallPos = [-723, -362, 0];
var classNames = ['days', 'hours', 'minutes', 'seconds'];
var idNames = ['d', 'h', 'm', 's'];
var animationFrames = 5;
var frameShift = 60.3;

// 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 now = new Date().getTime();
var end = Date.parse(target);
// Fix if date is in past
if (end < now){
    target = 'April 11, 2011';
    end = Date.parse(target);
}
var theDiff = end-now;
var theDiffString = getTimeString(theDiff);

// Increment (count one second at a time)
var increment = 1000;
// Pace of counting in milliseconds (refresh digits every second)
var pace = 1000;

// Function that controls counting
function doCount(){
    var x = getTimeString(theDiff);
    theDiff -= increment;
    var y = getTimeString(theDiff);
    // For debugging
    //console.log(y);
    digitCheck(x,y);
}

// This checks the old value vs. new value, to determine how many digits need to be animated.
function digitCheck(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)...