Momentjs和倒计时(Momentjs and countdown timer)

2019-07-29 07:19发布

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

所以everysecond它应该显示:

02:00:00

1时59分59秒

1时59分58秒

1时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日期库综合格式添加到瞬间持续时间

<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 and countdown timer