how to countdown to a date

Question

I am wondering if anyone can help me. After hours of searching tirelessly on here and the web I can't seem to find a simple countdown using jquery. I don't want to use any sort of plugin just a simple jquery code to countdown from a date. I have managed to find this code below. But even with this code placing it in my website nothing appears. I added the jquery file from jquery.com and added the proper divs with counter ID and nothing. If anyone can explain or show me how to make a simple countdown in a function that takes in a date format and returns a countdown I would appreciate the 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 is working fine as a normal 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 appearing 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> 

Output will appear as follows:-

0days 23hrs 25mins 8secs

1days 23hrs 25mins 8secs

Answer 2

That's not jQuery, that's JavaScript. But anyways...

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

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

Also, you shouldn't use += on innerHTML. Instead, use a variable (example: var output = "") and add to that, then assign to the innerHTML at the end.

Finally, double-check that the ID of the div matches the ID you have in getElementById.