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

Here is my contribution for the sake of new readers of this post.

I am using setTimeout instead of setInterval so that we can easily update the target date while it is still counting down. I will also include the time of the target day for a better precision and the time will be local. So i guess this covers most of the possible requirements to start with.

function refreshTimer(){
  function countDown(){
    setTimeout(function(now){
                 var dif = (td-now)/1000,
                      ss = Math.floor(dif % 60).toString().padStart(2,"0"),
                      ms = Math.floor(dif/60 % 60).toString().padStart(2,"0"),
                      hs = Math.floor(dif/3600 % 24).toString().padStart(2,"0"),
                      ds = Math.floor(dif/86400).toString().padStart(3,"0");
                  remainingTime.textContent = dif > 0 ? `${ds} Days ${hs}:${ms}:${ss}`
                                                      : "Sorry. You are already late..!";
                  active && countDown();
                  this.removeEventListener("change", kill); // possibly redundant
                }, 1000, Date.now());
  }
  var td     = new Date(this.value),
      active = true,
      kill   = _ => active = false;
  this.addEventListener("change", kill);
  countDown();
}

var targetDateTime = document.getElementById("targetDateTime"),
    remainingTime  = document.getElementById("remainingTime");

targetDateTime.addEventListener("change",refreshTimer);

<input id="targetDateTime" type="datetime-local">
<p id="remainingTime"></p>

It would be ideal to have the days, hours, minutes and seconds in their own <div>s or <span>s for a better display in which case updating them individually would be another task.

Answer 2

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 3

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.