Momentjs 和倒数计时器答案

【问题标题】：Momentjs and countdown timerMomentjs 和倒数计时器
【发布时间】：2012-05-05 15:39:33
【问题描述】：

我发现 Momentjs 库非常酷，但是我发现文档对于如何完成一些简单的任务不是很清楚。我正在尝试构建一个倒数计时器，我猜我应该使用持续时间对象，但我不太明白如何（可能是因为英语不是我的第一语言）。无论如何，这就是我想要的：

var time = 7200;
var duration = moment.duration('seconds',time);

setInterval(function(){
  //show how many hours, minutes and secods are left
  $('.countdown').text(duration.format('h:mm:ss')); 
  //this doesn't work because there's no method format for the duration object.
},1000);

所以它应该每秒显示一次：

02:00:00

01:59:59

01:59:58

01:59:57

...

00:00:00

我将如何使用 Momentjs 库实现此结果？谢谢！

【问题讨论】：

我不知道 momentjs 库，但您似乎想要 setInterval。
Momentjs 提供了获取时间和日期的方法，但它不执行任何其他操作，因此我必须构建自己的脚本以每秒减去 1 秒并从 setInterval 函数中显示它。
哦，废话，我明白你现在在说什么了。修正了错误。
github.com/icambron/moment-countdown moment-countdown 是一个与 Countdown.js 集成的小 moment.js 插件

标签： javascript jquery momentjs

【解决方案1】：

duration 对象代表一个静态周期，它不会随着时间的流逝而增加/减少。所以如果你要减少它，你必须自己做，例如创建一种秒计数器或每次重新创建 duration 对象。这是第二个选项的代码：

var time = 7200;
var duration = moment.duration(time * 1000, 'milliseconds');
var interval = 1000;

setInterval(function(){
  duration = moment.duration(duration.asMilliseconds() - interval, 'milliseconds');
  //show how many hours, minutes and seconds are left
  $('.countdown').text(moment(duration.asMilliseconds()).format('h:mm:ss'));
}, interval);

【讨论】：

+1 用于解释和解决方案，这正是我正在寻找的。谢谢！

【解决方案2】：

我也不太了解 Momentjs，但我认为您正在寻找这样的东西：

var time = 7200;
var duration = moment.duration('seconds',time);

setInterval(function(){
    var countdown = duration.milliseconds();
    $('.countdown').text(moment(countdown).format('h:mm:ss')); 
},1000);

【讨论】：

【解决方案3】：

https://github.com/jsmreese/moment-duration-format 它是 Moment.js JavaScript 日期库的插件，用于为 Moment 持续时间添加全面的格式

<script type="application/javascript" src="/js/moment.js"></script>
<script type="application/javascript" src="/js/moment-duration-format.js"></script>

<script>

function startTimer(){

var duration = moment.duration({
    'hour': 2,
    'minutes': 0,
    'seconds': 0 
});

var interval = 1;

var timerID = -1; //hold the id

var timer = setInterval(function () {

    if(duration.asSeconds() <= 0){
        console.log("STOP!");
        console.log(duration.asSeconds());
        clearInterval(timerID);
    }
    else{

    duration = moment.duration(duration.asSeconds() - interval, 'seconds');

    $('.countdown').html( duration.format("hh:mm:ss", { trim: false }) );
    }

}, 1000);

timerID = timer;

return timer;
};

//start
myTimer = startTimer();    

//stop
//clearInterval(myTimer);

</script>

【讨论】：

【解决方案4】：

这是我在 2019 年所做的。

var time = 7200;
var duration = moment.duration(time, "seconds");
var interval = 1000;

setInterval(function(){
  duration.subtract(interval, "milliseconds"); //using momentjs substract function
  console.log(moment(duration.asMilliseconds()).format('hh:mm:ss')); 
}, interval );

【讨论】：