Момент JS: обратный отсчет не рассчитывает правильную разницу и не приводит ее к обратному отсчету

Question

Я пытаюсь реализовать простой обратный отсчет до события, который будет отображать days, hours, minutes и seconds до события.

Для этого я m пытается использовать moment.js

В настоящее время при написании этого поста это 20: 43 6 августа 2020 года. Событие начинается 7 сентября 2020 года, 13:00 .

Я пытаюсь вычислить разницу в дате и времени между текущим временем и датой и временем начала события (вы знаете, как это работает).

Однако, с моим текущим подходом, разница в датах говорит о 28-дневной разнице между текущим моментом и 7 сентября , что неверно, должно быть 32.

Кроме того, как вы увидите из моей разметки ниже, мои цифры (дни, часы, минуты и секунды) разделены на отдельные элементы div. Я видел этот пример , который показывает функцию обратного отсчета.

Однако в приведенном выше примере используется один 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

С момента docs:

Намного лучше использовать момент # 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.