Momentjs và đồng hồ đếm ngược

Question

Tôi đã tìm thấy thư viện Momentjs khá hay, tuy nhiên tôi không tìm thấy tài liệu hướng dẫn rõ ràng về cách thực hiện một số tác vụ đơn giản. Tôi đang cố gắng để xây dựng một đồng hồ đếm ngược và tôi đoán tôi nên sử dụng đối tượng thời gian, nhưng tôi không hoàn toàn hiểu làm thế nào (có thể do thực tế là tiếng Anh không phải là ngôn ngữ đầu tiên của tôi). Dù sao đây là những gì tôi muốn:

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

Vì vậy everysecond nó sẽ hiển thị:

02:00:00

01:59:59

01:59:58

01:59:57

...

00:00:00

Làm cách nào để đạt được kết quả này với thư viện Momentjs? Cảm ơn!

Answer 1

duration đối tượng đại diện cho một khoảng thời gian tĩnh, và nó không làm tăng/giảm với dòng chảy của thời gian. Vì vậy, nếu bạn làm gì để giảm nó, bạn phải tự mình làm, ví dụ như tạo một kiểu đếm giây hoặc tái tạo đối tượng duration mỗi lần. Dưới đây là mã cho lựa chọn thứ hai:

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

Tôi không biết Momentjs rất tốt trong hai, nhưng tôi nghĩ rằng bạn đang tìm kiếm một cái gì đó như thế này:

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 của một plugin vào thư viện ngày Moment.js hoạt Javascript để thêm định dạng toàn diện để Moment Thời lượng

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