javascript - Momentjs 和倒数计时器

Question

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

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 库实现此结果？谢谢！

Answer 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);

Answer 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);

Answer 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>

Answer 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 );