javascript countdown from d:h:m:s

Question

I'm new in javascript. My PHP script returns a value in this format

d:h:m:s

Now I would like to have a countdown which is able to countdown each second from this.

I modified a countdown. This works once a time, after the countdown "ticks" each second it returns NaN all the time. Any idea what I do wrong?

$(document).ready(function() {
  setInterval(function() {
    $('.countdown').each(function() {
      var time = $(this).data("time").split(':');
      var timestamp = time[0] * 86400 + time[1] * 3600 + time[2] * 60 + time[3] * 1;
      var days = Math.floor(timestamp / 86400);
      console.log(time,timestamp);
      var hours = Math.floor((timestamp - days * 86400) / 3600);
      var minutes = Math.floor((timestamp - hours * 3600) / 60);
      var seconds = timestamp - ((days * 86400) + (hours * 3600) + (minutes * 60))-1;
      $(this).data("time",""+days+":"+hours+":"+minutes+":"+seconds);
      if (hours < 10) {
        hours = '0' + hours;
      }
      if (minutes < 10) {
        minutes = '0' + minutes;
      }
      if (seconds < 10) {
        seconds = '0' + seconds;
      }

      $(this).text(days + ':' + hours + ':' + minutes + ':' + seconds);

    });
  }, 1000);
})
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 class="countdown">02:03:05:59</h1>

Answer 1

As far as I can see you have 2 problems here:

1. after the first execution you change the pattern of the text you display in the h1. First you have 02:03:05:59. Then you want to write 02 days 03:05:58 into the tag. Next time you parse it, you get the error because you split at : and that does not work anymore as you have days instead of : as the seperator for the first part.
2. When calculating the minutes, you should also substract the days and not just the hours.

When you wan to keep the dd:hh:mm:ss format, you could do it like this:

$(document).ready(function() {
  setInterval(function() {
    $('.countdown').each(function() {
      var time = $(this).text().split(':');
      var timestamp = time[0] * 86400 + time[1] * 3600 + time[2] * 60 + time[3] * 1;
      timestamp -= timestamp > 0;
      var days = Math.floor(timestamp / 86400);
      console.log(days);
      var hours = Math.floor((timestamp - days * 86400) / 3600);
      var minutes = Math.floor((timestamp - days * 86400 - hours * 3600) / 60);
      var seconds = timestamp - days * 86400 - hours * 3600 - minutes * 60;
      if (days < 10) {
        days = '0' + days;
      }
      if (hours < 10) {
        hours = '0' + hours;
      }
      if (minutes < 10) {
        minutes = '0' + minutes;
      }
      if (seconds < 10) {
        seconds = '0' + seconds;
      }

      $(this).text(days + ':' + hours + ':' + minutes + ':' + seconds);

    });
  }, 1000);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 class="countdown">02:03:05:59</h1>