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

- Ignas

---

我不熟悉momentjs库，但是看起来你想要使用setInterval。 - pimvdb

Moment.js 提供了获取时间和日期的方法，但它并不能做其他事情，因此我必须构建自己的脚本，在 setInterval 函数中每秒减去 1 秒并显示它。 - Ignas

天啊，我现在明白你的意思了。已经修复了这个错误。 - Ignas

moment-countdown是一个微小的moment.js插件，可以与Countdown.js集成。 - The Demz

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

- Andrei

---

+1 对于您提供的解释和解决方案非常满意，正是我所需要的。谢谢！ - Ignas

Answer 2

这是一个插件，用于Moment.js JavaScript日期库，可为Moment Durations添加全面的格式化功能。https://github.com/jsmreese/moment-duration-format

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

- The Demz

Answer 3

我对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);

- BishopZ

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

- nokieng