How to countdown to a date

Question

I am wondering if anyone can help me. After long hours of searching tirelessly here and on the Internet, I cannot find a simple countdown using jquery. I don't want to use any plugin just simple jquery code to countdown from a date. I managed to find this code below. But even with this code hosting it on my website, nothing appears. I added a jquery file with jquery.com and added the appropriate div with counter ID and nothing. If anyone can explain or show me how to make a simple countdown in a function that takes a date format and returns a countdown, I would appreciate help.

 var end = new Date('02/19/2012 10:1 AM'); 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) { clearInterval(timer); document.getElementById('countdown').innerHTML = 'EXPIRED!'; return; } 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); document.getElementById('countdown').innerHTML = days + 'days '; document.getElementById('countdown').innerHTML += hours + 'hrs '; document.getElementById('countdown').innerHTML += minutes + 'mins '; document.getElementById('countdown').innerHTML += seconds + 'secs'; } timer = setInterval(showRemaining, 1000); 

Answer 1

This works just fine like regular javascript.

 <script> var end = new Date('02/19/2012 10:1 AM'); 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) { clearInterval(timer); document.getElementById('countdown').innerHTML = 'EXPIRED!'; return; } 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); document.getElementById('countdown').innerHTML = days + 'days '; document.getElementById('countdown').innerHTML += hours + 'hrs '; document.getElementById('countdown').innerHTML += minutes + 'mins '; document.getElementById('countdown').innerHTML += seconds + 'secs'; } timer = setInterval(showRemaining, 1000); </script> <div id="countdown"></div> 

Your output is as follows: -

1days 9hrs 3mins 22secs

UPDATE

Using functions:

 <script> CountDownTimer('02/19/2012 10:1 AM', 'countdown'); CountDownTimer('02/20/2012 10:1 AM', 'newcountdown'); function CountDownTimer(dt, id) { var end = new Date(dt); 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) { clearInterval(timer); document.getElementById(id).innerHTML = 'EXPIRED!'; return; } 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); document.getElementById(id).innerHTML = days + 'days '; document.getElementById(id).innerHTML += hours + 'hrs '; document.getElementById(id).innerHTML += minutes + 'mins '; document.getElementById(id).innerHTML += seconds + 'secs'; } timer = setInterval(showRemaining, 1000); } </script> <div id="countdown"></div> <div id="newcountdown"></div> 

The output will look like this: -

0 hours 23 hours 25 minutes 8 seconds

1 day 23 hours 25 minutes 8 seconds

Answer 2

This is not jQuery, this is JavaScript. But anyway...

You almost got it. The only problem is var distance = end-now; . It should be:

 var distance = end.getTime()-now.getTime(); 

Also, you should not use += in innerHTML . Instead, use a variable (example: var output = "" ) and add to it, then assign innerHTML at the end.

Finally, double-check that the div identifier matches the identifier specified in getElementById .