Question

我发现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

1时59分59秒

1时59分58秒

1时59分57秒

...

00:00:00

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

Answer 1

duration object表示静态期间，并且不会随着时间的推移而增加/减少。因此，如果你要减少它，你必须自己做，例如创建一种秒计数器或每次重新创建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 Durations添加全面的格式

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

Momentjs和倒数计时器

4 个答案: