Simple javascript countdown
DAYS HOURS MIN SEC
The JavaScript code
var date_countdown = new Date(2009,2,23,21,0,0);
function countdown_text()
{
var now = new Date();
var amount = date_countdown.getTime() - now.getTime();
delete now;
// time is already past
if (amount < 0) {
document.getElementById('countdown_text').innerHTML = "Now!";
} else {
var days = hours = mins = secs = 0;
var out = '';
amount = Math.floor(amount/1000);
days = Math.floor(amount/86400);
amount = amount%86400;
hours = Math.floor(amount/3600);
amount = amount%3600;
mins = Math.floor(amount/60);
amount = amount%60;
secs = Math.floor(amount);
days = days < 10 ? '0'+days: days.toString();
hours = hours < 10 ? '0'+hours: hours.toString();
mins = mins < 10 ? '0'+mins: mins.toString();
secs = secs < 10 ? '0'+secs: secs.toString();
document.getElementById('countdown_text').innerHTML = '<b>'+days+'</b> <i>:</i> <b>'+hours+'</b> <i>:</i> <b>'+mins+'</b> <i>:</i> <b>'+secs+'</b>';
setTimeout('countdown_text()', 1000);
}
}
window.onload = function() { countdown_text(); }
The CSS code used for this example
#countdown_text {
font-family: helvetica, arial, sans-serif;
font-size: 36px;
font-weight: bold;
letter-spacing: -1px;
line-height: 32px;
}
#countdown_text b {
}
#countdown_text i {
position: relative;
font-size: 27px;
font-style: normal;
top: -5px;
color: #555;
}
#countdown_text_label { font-family: helvetica, arial, sans-serif; font-size: 18px; color:#555 }
Notes: The site use 2 different template (night and day) this is why the text for the countdown is white and note black when you visite this page the night