格式化Moment.js持续时间

问题描述：

我正在使用 Moment.js 来跟踪应用程序中操作的持续时间.目前，我有以下代码:

I am using Moment.js to track the duration of an action in my app. Currently, I have the following code:

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创建的持续时间?如果无法做到这一点，我应该使用另一个库来跟踪持续时间并显示它吗?

My problem is, the format of duration is awkward. I want to display the duration as mm:ss.lll. In other words, always show two digits for the minutes, two digits for the seconds, and three digits for the milliseconds. Currently, I see durations printed like 1:2.45. How do I format a duration created with Moment.js? If this is not possible, is there another library I should be using to track a duration and display it?

谢谢！

答

一种方法是将持续时间转换回一个瞬间(也许使用毫秒)，然后再使用该瞬间的格式.

One way of doing this might be to convert your duration back into a moment (perhaps using milliseconds), and then using the moment's formatting.

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>

相关推荐