Angular 中的倒数计时器使用 $Interval()

Question

我正在实现一个功能，以 Angular 形式倒计时当前时间 - 未来的现有时间。如果时间已过，则显示一条消息。定时器在..... HH:MM:SS

• 结束时间。让我们称之为 endTime 例如： 2016 年 9 月 15 日晚上 9:16:00
• 当前时间。时间当前我们生活的时刻。 我们称之为 currentTime。

目标是获得一个当前时间 - 结束时间的计时器。将其保存到变量 TotalHours。

然后将 NOW 的剩余时间计算为总小时数。例如 TotalHours = 5。现在是 2016 年 9 月 14 日下午 1:16:00，然后 FinalCountDown = 6:16:00 PM。那是我要运行的计时器...

这就是我的做法......

if (info.endTime) {

  var CurrentTime = new Date().toLocaleString('en-US');
  moment.locale(); // en

  var TotalHours = moment.utc(moment(info.diffTime, "DD/MM/YYYY HH:mm:ss").diff(moment(CurrentTime, "DD/MM/YYYY HH:mm:ss"))).format("HH:mm:ss");

  info.finalCountDown= TotalHours;

};

这里的问题如下：

案例一：

endTime = 9/15/2016 9:16:00 AM
currentTime = 9/15/2016 1:21:00 PM

TotalHours = 4:05:00

但是……如果是在接下来的 2 天之后……

案例 2：

endTime = 9/17/2016 9:16:00 AM
currentTime = 9/15/2016 1:21:00 PM

TotalHours = 4:05:00

Total hours is still the same...

我需要它添加 24 小时 + 24 小时 + 额外时间 = 48 + 4:05:00 = 52:05:00

我也希望它显示为：52h:05m:00s

请告诉我如何解决这个问题...

Answer 1

一个快速而肮脏的解决方案是简单地将两个日期/时间对象之间的差异转换为毫秒，然后对毫秒进行一些数学运算，并将输出格式化如下：

var currentTime = new Date("9-15-2016 13:21:00");
var endTime = new Date("9-17-2016 09:16:00");

var ms = (endTime - currentTime); // ms of difference
var days = Math.round(ms/ 86400000);
var hrs = Math.round((ms% 86400000) / 3600000);
var mins = Math.round(((ms% 86400000) % 3600000) / 60000);

$scope.finalCountdown = (days + "d:" + hrs + " h:" + mins + "m left");

如果需要，您可以添加秒数计算，并且可以对数字进行一些格式化以使用前导零。

但是，这样做并没有考虑闰年以及其他数据和时间异常等问题。更好的建议是使用angular-moment，它利用Moment.js，因为它可以轻松处理差异和格式。