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

2006 - now © Philippe Archambault, made by Frog CMS