JavaScript / jQuery Countdown

Question

What I would like to do is a countdown that is updated in real time ... for example:

6 days (days only)

12 hours (just a few hours in 1 day)

59 minutes (total minutes for 1 hour)

59 seconds (just a few seconds for 1 minute)

Best way to achieve 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 a countdown timer, if you want - just click the generate button and copy the attached results into a .html file

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

Answer 4

Notable mention: http://www.littlewebthings.com/projects/countdown/ (probably not important since you mentioned that you did not want to use the plugin)

Answer 5

The problem with the above approach is that there will be problems associated with differences in time zones and daylight saving time. See This Question I Asked by Javascript Countdown and Timezone and Daylight Saving Issues

Answer 6

jCounter offers control over the format in which you want your countdown displayed among other parameters and control methods.