javascript 从 d:h:m:s 开始倒计时

Question

我是 javascript 的新人。我的 PHP 脚本 returns 这种格式的值

d:h:m:s

现在我想要一个倒计时，可以从这里开始倒计时。

我修改了一个倒计时。这一次工作一次，在倒计时 "ticks" 每秒它一直 returns NaN 之后。知道我做错了什么吗？

$(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

据我所知，您在这里有 2 个问题：

第一次执行后，您更改了在 h1 中显示的文本模式。首先你有 02:03:05:59。然后您想将 02 days 03:05:58 写入标记。下次你解析它时，你会得到错误，因为你在 : 处拆分并且它不再起作用，因为你有 days 而不是 : 作为第一部分的分隔符。
计算分钟时，您还应该减去天数，而不仅仅是小时数。

如果您想保留 dd:hh:mm:ss 格式，您可以这样做：

$(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>

Answer 2

您的代码段从 dd:hh:mm:ss 到 dd 天，hh 小时。所以第二次，您的标签包含不可解析的文本。

我已将其更改为更精确的内容。更精确的是在未来给出以毫秒为单位的时间戳，而不是以秒为单位的时间戳，因为渲染页面需要几秒钟。如果你从服务器上取舍，可能会更好。

var aDay = 24*60*60*1000, anHour = 60*60*1000, aMin = 60*1000, aSec = 1000;
$(document).ready(function() {
  $('.countdown').each(function() {
    var time = $(this).data("time").split(':');
    var date = new Date();
    date.setDate(date.getDate()+parseInt(time[0],10))
    date.setHours(date.getHours()+parseInt(time[1],10),date.getMinutes()+parseInt(time[2],10),date.getSeconds()+parseInt(time[3],10),0)
    $(this).data("when",date.getTime());
  });
  setInterval(function() {
    $('.countdown').each(function() {
      var diff = new Date(+$(this).data("when"))-new Date().getTime();
      var seconds, minutes, hours, days, x = diff / 1000;
      seconds = Math.floor(x%60); x=(x/60|0); minutes = x % 60; x= (x/60|0); hours = x % 24; x=(x/24|0); days = x;
      $(this).text(
        days    + ' day'   +(days==1?", ":"s, ") + 
        hours   + ' hour'  +(hours==1?", ":"s, ") + 
        minutes + ' minute'+(minutes==1?", ":"s, ") + 
        seconds + ' second'+(seconds==1?".":"s.")
      );
    });
  }, 500);
})

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

javascript 从 d:h:m:s 开始倒计时

javascript countdown from d:h:m:s

javascript

html

countdown