Question

我正在尝试实现一种简单的倒计时事件功能，该功能将向事件显示days，hours，minutes和seconds。

为此，我正在尝试利用moment.js

当前，撰写本文时， 2020年8月6日20:43 。该活动开始于 2020年9月7日13:00 。

我正在尝试计算当前时间与事件开始日期和时间之间的日期和时间差（您知道它的工作原理）。

但是，按照我目前的方法，日期差表明现在和9月7日之间存在28天的差额，这是不正确的，应该是32天。

此外，正如您将从下面的标记中看到的那样，我的数字（天，小时，分钟和秒）被分为单独的div元素。我已经看到this example展示了倒计时功能。

但是，以上示例使用了一个div（.countdown）。当它们位于单独的div中时，是否仍可能具有倒计时功能？如果可以，怎么办？

我当前的做法：

  $(function() {


    var eventTime = 1599483600000; // Timestamp  for  07-Sep-2020 13:00:00 GMT+0000
       var currentTime = new Date();
    var diffTime = eventTime - currentTime;
    var duration = moment.duration(diffTime*1000, 'milliseconds');
    var interval = 1000;

    duration = moment.duration(duration - interval, 'milliseconds');

    var days = duration.days();
    var hours = duration.hours();
    var minutes = duration.minutes();
    var seconds = duration.seconds();

    console.log("Days: " + days + ", Hours: " + hours + ", Minutes: " + minutes + ". Seconds: " + seconds);


    var days_div      = document.querySelector ('#countdown__days span');
    var hours_div     = document.querySelector ('#countdown__hours span');
    var minutes_div   = document.querySelector ('#countdown__minutes span');
    var seconds_div   = document.querySelector ('#countdown__seconds span');
    
    days_div.innerHTML     = days_div.innerHTML + days;
    hours_div.innerHTML    = hours_div.innerHTML + hours;
    minutes_div.innerHTML  = minutes_div.innerHTML + minutes;
    seconds_div.innerHTML  = seconds_div.innerHTML + seconds;

  });

.countdown{
  display: flex;
}

.countdown .countdown__item{
  padding: 0px 20px;
  border-right: 2px solid blue;
  text-align: center;
  align-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>


<div class="countdown">

  <div id="countdown__days" class="countdown__item">
    <span class="number"></span>
    <p>Days</p>
  </div>
  
  <div id="countdown__hours" class="countdown__item">
    <span class="number"></span>
    <p>Hours</p>
  </div>
  
  <div id="countdown__minutes" class="countdown__item">
    <span class="number"></span>
    <p>Minutes</p>
  </div>
  
  <div id="countdown__seconds" class="countdown__item">
    <span class="number"></span>
    <p>Seconds</p>
  </div>
  
</div>

Answer 1

从文档开始：

与使用“持续时间”相比，使用moment＃diff计算两个时刻之间的天数或年数要好得多。

如果没有额外的数学运算，我也无法像这样解决该问题，因为提供给diff()的第二个参数给出了该单元的全部差异。您可以将差异传递给持续时间（按https://momentjs.com/docs/#/displaying/difference/），然后使用其他依赖项来格式化持续时间，而无需进行数学计算https://www.npmjs.com/package/moment-duration-format

$(function () {
  function setTime() {
    var eventTime = new moment(1599483600000); // Timestamp  for  07-Sep-2020 13:00:00 GMT+0000
    var currentTime = new moment();
    var diff = eventTime.diff(currentTime);
    var days = eventTime.diff(currentTime, "days");
    var hours = eventTime.diff(currentTime, "hours") - days * 24;
    var minutes =
      eventTime.diff(currentTime, "minutes") - days * 24 * 60 - hours * 60;
    var seconds =
      eventTime.diff(currentTime, "seconds") -
      days * 24 * 60 * 60 -
      hours * 60 * 60 -
      minutes * 60;

    var days_div = document.querySelector("#countdown__days span");
    var hours_div = document.querySelector("#countdown__hours span");
    var minutes_div = document.querySelector("#countdown__minutes span");
    var seconds_div = document.querySelector("#countdown__seconds span");

    days_div.innerHTML = days;
    hours_div.innerHTML = hours;
    minutes_div.innerHTML = minutes;
    seconds_div.innerHTML = seconds;
  }

  setTime();
  setInterval(setTime, 1000);
});

.countdown{
  display: flex;
}

.countdown .countdown__item{
  padding: 0px 20px;
  border-right: 2px solid blue;
  text-align: center;
  align-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

<div class="countdown">

  <div id="countdown__days" class="countdown__item">
    <span class="number"></span>
    <p>Days</p>
  </div>
  
  <div id="countdown__hours" class="countdown__item">
    <span class="number"></span>
    <p>Hours</p>
  </div>
  
  <div id="countdown__minutes" class="countdown__item">
    <span class="number"></span>
    <p>Minutes</p>
  </div>
  
  <div id="countdown__seconds" class="countdown__item">
    <span class="number"></span>
    <p>Seconds</p>
  </div>
  
</div>

Answer 2

绝对有可能。您需要使用setInterval（）函数。在该函数中，您将获取currentTime变量并每秒计算差异并更新DOM元素。

如果您查看示例，则共享的所有计算都在setInterval函数中。

Moment JS：倒数计时无法计算正确的差并将其倒计时

2 个答案: