javascript - Momentjs 倒计时 - 持续时间显示负数

标签 javascript typescript rxjs momentjs countdown

我正在尝试使用 MomentJS (2.22.2) 和 Rxjs (6.2.2) interval 创建倒计时。但是当我到达某些时间点时,我的倒计时变得疯狂并输出负数,例如,它应该减去一天并从 23 小时开始。

关于我应该如何解决这个问题有什么帮助吗?


示例

本地时间:2018-09-05T18:49

结束时间:2018-11-03T18:00

这导致:

Negative countdown


我的代码

'this.days', 'this.hours', 'this.minutes' & 'this.seconds' 是局部变量,保存结果时间的字符串表示(字符串格式,因为我想显示前导零)

interval(1000).subscribe(() => {
      const now = moment();
      let timeLeft = this.endDate.diff(now, 'milliseconds', true);
      let endDate = moment(this.endDate); // Use 'moment' to make a new copy

      // Days
      const days = Math.floor(moment.duration(timeLeft).asDays());
      console.warn(moment.duration(timeLeft).asDays());
      this.days = Countdown.addLeadingZeros(days.toString(), 3);

      endDate = endDate.subtract(days, 'days');
      timeLeft = endDate.diff(now, 'milliseconds', true);

      // Hours
      const hours = Math.floor(moment.duration(timeLeft).asHours());
      console.warn(Math.round(moment.duration(timeLeft).asHours()));
      this.hours = Countdown.addLeadingZeros(hours.toString(), 2);

      endDate = endDate.subtract(hours, 'hours');
      timeLeft = endDate.diff(now, 'milliseconds', true);

      // Minutes
      const minutes = Math.floor(moment.duration(timeLeft).asMinutes());
      this.minutes = Countdown.addLeadingZeros(minutes.toString(), 2);

      endDate = endDate.subtract(minutes, 'minutes');
      timeLeft = endDate.diff(now, 'milliseconds', true);

      // Seconds
      const seconds = Math.floor(moment.duration(timeLeft).asSeconds());
      this.seconds = Countdown.addLeadingZeros(seconds.toString(), 2);
});

有没有人看到我在这里做错了什么或者我可以如何改进这段代码?

最佳答案

由于夏令时的变化,您的代码中出现了负数。

在英国,2018-09-052018-11-03 之间的夏令时发生了变化。事实上它是在 2018-10-28 上。如果我在这两侧选择两个日期,我可以重现您的问题,但如果两个日期都在同一侧,则不能。我猜你住的地方在 2018-09-052018-11-03 之间也有夏令时的变化。

避免此类问题的最简单方法是使用 UTC 时间计算时差。而不是写作

  const now = moment();

  const now = moment().utc();

并确保 this.endDate 是在 UTC 而不是本地时间中创建的。

关于javascript - Momentjs 倒计时 - 持续时间显示负数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52190158/

相关文章:

javascript - 处理 Rally 数据存储中的空异常

angular - 仅从 Angular 2+ 将特殊字符粘贴到文本框中时修剪特殊字符

typescript :如何指定箭头函数类型的通用参数

javascript - 具有输入值的函数的返回类型

angular - 从 setTimeout Observable 方法访问一个值

javascript - 按对象数组的属性过滤 Observable

javascript - JS : function not defined, 无法创建 JSON 对象,因为 JS 无法识别 key 是字符串

javascript - 属性失效值用js修改伪元素

java - 设置 AJAX 进度条

angularfire2 rxjs 通过动态更新从两个表中加入 observable