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

javascript countdown from d:h:m:s

本文关键字：javascript 开始 倒计时      更新时间：2024-05-25

我是javascript新手。我的PHP脚本返回以下格式的值

d:h:m:s

现在我想有一个倒计时，能够从这个倒计时每一秒。

我修改了倒计时。这种方法每次工作一次，在倒计时"滴答"后，它一直返回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>

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

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

当你想保持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>

您的代码段从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>

相关文章：