JavaScript / jQuery Countdown

Question

What I'd like to accomplish is a countdown that updates live... like this:

6 Days (just the days)

12 Hours (just hours within 1 day)

59 Minutes (just minutes within 1 hour)

59 Seconds (just seconds within 1 minute)

Best way to accomplish this?

Answer 1

You can find a working example at http://jsfiddle.net/gaby/QH6X8/79/

var end = new Date('15 Dec 2010');

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24

var timer;

function showRemaining()
{
    var now = new Date();
    var distance = end - now;
    if (distance < 0 ) {
       // handle expiry here..
       clearInterval( timer ); // stop the timer from continuing ..
       alert('Expired'); // alert a message that the timer has expired..
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor( (distance % _day ) / _hour );
    var minutes = Math.floor( (distance % _hour) / _minute );
    var seconds = Math.floor( (distance % _minute) / _second );

    var countdownElement = document.getElementById('countdown');
    countdownElement.innerHTML = 'Days: ' + days + '<br />';
    countdownElement.innerHTML += 'Hours: ' + hours+ '<br />';
    countdownElement.innerHTML += 'Minutes: ' + minutes+ '<br />';
    countdownElement.innerHTML += 'Seconds: ' + seconds+ '<br />';
}

timer = setInterval(showRemaining, 1000);

Answer 2

jQuery Countdown plugin

Answer 3

here you can generate countdown timer if you like - just press generate and copy paste the results into .html file

http://www.ricocheting.com/code/javascript/html-generator/countdown-timer

Answer 4

Notable mention: http://www.littlewebthings.com/projects/countdown/ (probable irrelevant since you mentioned that you don't want to use a plugin)

Answer 5

The problem with the above accepted approach is that there will be issues here related to timezone differences and daylight saving time. See this question asked by me Javascript Countdown and Timezone and Daylight Saving Time Issues

Answer 6

jCounter offers control on what format you want your countdown to display among other control settings and methods.