[英]Format Moment.js Duration
我正在使用Moment.js跟蹤我的應用中操作的持續時間。 目前,我有以下代碼:
var startMoment = null;
var actionClock = null;
function startClock() {
actionClock = setInterval(function(){
if (startMoment === null) {
startMoment = moment();
$('#duration').text('00:00:00');
} else {
var now = moment();
var span = moment.duration(now - startMoment);
$('#duration').text(span.minutes() + ':' + span.seconds() + '.' + span.milliseconds());
}
}, 1000);
}
function stopClock() {
clearInterval(actionClock);
var now = moment();
var span = moment.duration(now - startMoment);
$('#duration').text(span.minutes() + ':' + span.seconds() + '.' + span.milliseconds());
startMoment = null;
actionClock = null;
}
我的問題是,持續時間的格式很尷尬。 我想將持續時間顯示為mm:ss.lll。 換句話說,請始終在分鍾上顯示兩位數字,在秒上顯示兩位數字,並在毫秒上顯示三位數字。 目前,我看到的時長打印為1:2.45
。 如何格式化通過Moment.js創建的持續時間? 如果無法做到這一點,我應該使用另一個庫來跟蹤持續時間並顯示它嗎?
謝謝!
一種執行此方法的方法可能是將持續時間轉換回一個瞬間(也許使用毫秒),然后使用該瞬間的格式。
moment.utc(span.asMilliseconds()).format('mm:ss.SSS');
var startMoment = null, $durForm = $('#durationFormatted'); var actionClock = null; function startClock() { actionClock = setInterval(function() { if (startMoment === null) { startMoment = moment(); $('#duration').text('00:00:00'); $durForm.text('00:00.000'); } else { var now = moment(); var span = moment.duration(now - startMoment); $('#duration').text(span.minutes() + ':' + span.seconds() + '.' + span.milliseconds()); $durForm.text(moment(span.asMilliseconds()).format('mm:ss.SSS')); } }, 1000); } function stopClock() { clearInterval(actionClock); var now = moment(); var span = moment.duration(now - startMoment); $('#duration').text(span.minutes() + ':' + span.seconds() + '.' + span.milliseconds()); $durForm.text(moment(span.asMilliseconds()).format('mm:ss.SSS')); startMoment = null; actionClock = null; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> <div>Duration (original): <span id='duration'></span> </div> <div>Formatted moment: <span id='durationFormatted'></span> </div> <button onClick='startClock()'>Start Clock</button> <button onClick='stopClock()'>Stop Clock</button>
我的項目中有一個類似的問題,幸運的是,Lodash已經是一個依賴項。 我能夠使用_.padStart方法到達那里。
let yourHours = _.padStart(span.hours().toString(),2,'0');
let yourMinute = _.padStart(span.minutes().toString(),2,'0');
let yourSeconds = _.padStart(span.seconds().toString(),2,'0');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.