基于 jQuery 时区的倒计时

Question

我用过这个：

(function() {

  var timeElement, eventTime, currentTime, duration, interval, intervalId;

  interval = 1000; // 1 second

  // get time element
  timeElement = document.querySelector("#countdown");
  // calculate difference between two times
  eventTime = moment.tz("2022-05-29T08:00:00", "Europe/Berlin");
  // based on time set in user's computer time / OS
  currentTime = moment.tz();
  // get duration between two times
  duration = moment.duration(eventTime.diff(currentTime));

  // loop to countdown every 1 second
  setInterval(function() {
    // get updated duration
    duration = moment.duration(duration - interval, 'milliseconds');

    // if duration is >= 0
    if (duration.asSeconds() <= 0) {
      clearInterval(intervalId);
      // hide the countdown element
      timeElement.classList.add("hidden");
    } else {
      // otherwise, show the updated countdown
      timeElement.innerText = duration.days() + ":" + duration.hours() + ":" + duration.minutes() + ":" + duration.seconds();
    }
  }, interval);

}());

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.17/moment-timezone-with-data-2012-2022.min.js"></script>

<div id="countdown"></div>

很遗憾，时间计算不正确。例如，如果您将 2022-05-29 更改为 2022-08-29，则不会发生任何变化。此外，每个值都应该有两位数字。

有人有办法解决这个问题吗？将不胜感激！

Answer 1

您关于 momentjs 的问题已在此处得到解答；

您可以使用函数 padStart(length, withWhat) Mozilla Developer Network Documentation

用 0 填充字符串

//...snip...
    } else {
      // otherwise, show the updated countdown
      timeElement.innerText =
        duration.asDays().toFixed().padStart(2, 0) + ":" +
        duration.hours().toString().padStart(2, 0) + ":" +
        duration.minutes().toString().padStart(2, 0) + ":" + 
        duration.seconds().toString().padStart(2, 0);
    }
//...snip...

基于 jQuery 时区的倒计时

Countdown based on timezone with jQuery

javascript

jquery

moment-timezone