Pregunta Momentjs y temporizador de cuenta atrás


Encontré la biblioteca Momentjs, que es muy buena, sin embargo, no encuentro la documentación muy clara sobre cómo lograr algunas tareas simples. Estoy intentando construir un temporizador de cuenta regresiva y supongo que debería usar el objeto de duración, pero no entiendo muy bien cómo (quizás debido al hecho de que el inglés no es mi primer idioma). De todos modos, esto es lo que quiero:

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

Entonces cada segundo debe mostrar:

02:00:00

01:59:59

01:59:58

01:59:57

...

00:00:00

¿Cómo alcanzaría este resultado con la biblioteca de Momentjs? ¡Gracias!


7
2018-05-05 15:39


origen


Respuestas:


duration objeto representa un período estático, y no aumenta / disminuye con el flujo de tiempo. Entonces, si quieres disminuirlo, tienes que hacerlo tú mismo, por ejemplo, creando una especie de contador de segundos o recreando duration objeto todo el tiempo. Aquí está el código para la segunda opción:

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

14
2018-05-05 16:27



Tampoco sé muy bien Momentjs, pero creo que estás buscando algo como esto:

var time = 7200;
var duration = moment.duration('seconds',time);

setInterval(function(){
    var countdown = duration.milliseconds();
    $('.countdown').text(moment(countdown).format('h:mm:ss')); 
},1000);

2
2018-05-05 16:09



https://github.com/jsmreese/moment-duration-format Es un complemento de la biblioteca de fechas de JavaScript de Moment.js para agregar un formato completo a las Duraciones de momento

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

1
2018-03-04 01:10