javascript Momentjs 和倒数计时器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10463376/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Momentjs and countdown timer
提问by Ignas
I found the Momentjs library which is pretty cool, however I don't find the documentation to be very clear on how to achieve some simple tasks. I'm trying to build a countdown timer and I'm guessing I should use the duration object, but I don't quite understand how (maybe due to the fact that English isn't my first language). Anyways this is what I want:
我发现 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);
So everysecond it should display:
所以它应该每秒显示：
02:00:00
02:00:00
01:59:59
01:59:59
01:59:58
01:59:58
01:59:57
01:59:57
...
...
00:00:00
00:00:00
How would I achieve this result with the Momentjs library? Thanks!
我将如何使用 Momentjs 库实现此结果？谢谢！
回答by Andrei
durationobject represents a static period, and it does not increase/decrease with the flow of time. So if you what to decrease it you have to do it yourself, for example creating a kind of a seconds counter or recreating durationobject every time. Here is the code for the second option:
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);
回答by BishopZ
I don't know Momentjs very well either, but I think you are looking for something like this:
我也不太了解 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);
回答by The Demz
https://github.com/jsmreese/moment-duration-formatIts a plugin to the Moment.js JavaScript date library to add comprehensive formatting to Moment Durations
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>
回答by nokieng
Here is what I did in 2019.
这是我在 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 );
