2012-05-05 6 views
6

Я нашел библиотеку Momentjs, которая довольно крутая, однако я не нахожу документацию, чтобы быть очень ясным о том, как достичь некоторых простых задач. Я пытаюсь создать таймер обратного отсчета, и я предполагаю, что должен использовать объект продолжительности, но я не совсем понимаю, как (возможно, из-за того, что английский не является моим первым языком). В любом случае это то, что я хочу: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

01:59:59

01:59:58

01:59:57

...

00:00:00

Как достичь этого результата с помощью библиотеки Momentjs? Спасибо!

+0

я не знаю библиотеку momentjs , но вам кажется, что вы хотите 'setInterval'. – pimvdb

+0

Momentjs предоставляет методы для получения времени и дат, но он ничего не делает, поэтому мне нужно построить собственный скрипт для вычитания 1 секунды каждую секунду и отображения его из функции setInterval. – Ignas

+0

О, дерьмо, я понимаю, что ты сейчас говоришь. Исправлена ​​ошибка. – Ignas

ответ

13

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

+1 для объяснения и решения, которое именно то, что я искал. Благодаря! – Ignas

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

Спасибо, что получил меня на правильном пути! – Ignas

1

https://github.com/jsmreese/moment-duration-format Сво плагин для библиотеки даты Moment.js JavaScript, чтобы добавить всеобъемлющее форматирование Moment Длительность

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

 Смежные вопросы

  • Нет связанных вопросов^_^