Moment JS：倒计时没有计算正确的差异并让它倒计时

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 计算两个时刻之间的天数或年数比使用 Duration 好得多。

如果没有额外的数学，我也无法计算出如何做到这一点，因为提供给 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 函数中。