Question

在我的一个项目中，我必须计算两次之间的差异。例如，工作时间从6:30开始，到10点钟结束。差异是3小时30分钟。我写了一个小的JS函数来处理任务，它工作得很好，给我以下结果： 3.5 。我试过.format（＆＃34; HH：mm＆＃34;）但结果未定义而不是函数。
是否有任何方法可以将输出转换为＆＃34; HH：mm＆＃34;？

这是dateDiff函数：

function dateDiff() {
    var startTime = moment(document.getElementById("startTime").value, "HH:mm");
    var endTime = moment(document.getElementById("end").value, "HH:mm");

    var duration = moment.duration(endTime.diff(startTime));
    var hours = duration.asHours();
    console.log(hours);
    document.getElementById('dateDiffResult').value = moment(hours);
}

Answer 1

您可以单独获取小时和分钟并格式化字符串：

function dateDiff() {
    var startTime = moment(document.getElementById("startTime").value, "HH:mm");
    var endTime = moment(document.getElementById("end").value, "HH:mm");

    var duration = moment.duration(endTime.diff(startTime));
    var hours = duration.hours();
    var minutes = duration.minutes();
    document.getElementById('dateDiffResult').value = hours +":"+ minutes;
}

Answer 2

如果您的功能有效并且以小时为单位给出时差，那么从小时数计算小时和分钟就很简单了吗？使用你所说的差异3.5 ...

var diff=3.5;
var hour=Math.floor(diff);//gives  hour=3;
var hours=("0"+ hour).slice(-2);//pads the hours with a leading zero if required to give hours=03;

var minute = (diff-hour)*60;//gives 30
var minutes=("0"+ minute ).slice(-2);//pads the minutes with a leading zero if required to give minutes=30;
var totalDiff= hours + ":" +minutes; //gives 03:30 as in HH:MM

我添加了以下内容以在代码段中演示：

＆＃13;

$(document).ready
	(function(){

		var diff=3.5;
var hour=Math.floor(diff);//gives  hour=3;
var hours=("0"+ hour).slice(-2);//gives  hours=03;

var minute = (diff-hour)*60;//gives 30
var minutes=("0"+ minute ).slice(-2);//gives  minutes=30;
var totalDiff= hours + ":" +minutes; //gives 03:30 as in HH:MM
alert("HH:MM: " + totalDiff);
	})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 3

使用时间字段jQuery插件，您可以生成时间字段。之后，您可以收听字段的更改并相应地更新小时差异。

＆＃13;

(function($) {
  $.initTimeFields = function(interval) {
    $('.time-field').each(function(_, field) {
      $(field).initTimeField(interval);
    });
  };
  $.fn.initTimeField = function(interval) {
    var hour = 0, minute = 0, diff;
    while (hour < 24 && minute < 60) {
      this.append($('<option>', {
        val : hour * 60 + minute,
        text : ('00' + hour).substr(-2) + ':' + ('00' + minute).substr(-2)
      }));
      minute += interval;
      diff = minute - 60;
      if (diff >= 0) {
        hour += 1;
        minute %= 60;
      }
    }
    var value = this.data('value') || 0;
    if (typeof value === 'string' && value.indexOf(':') > -1) {
      value = (function(values) {
        return parseInt(values[0], 10) * 60 + parseInt(values[1], 10);
      }(value.split(':')));
    }
    this.val(value);
  };
}(jQuery));

function updateTimeDiff() {
  $('#hour-diff').val(calcHourDiff(getTime('#start-time'), getTime('#end-time')) + ' hours');
}
function calcHourDiff(startTime, endTime) {
  var diff = moment.duration(endTime.diff(startTime));
  return ('00' + diff.hours()).substr(-2) + ':' + ('00' + diff.minutes()).substr(-2);
}
function getTime(selector) {
  return moment($(selector).find('option:selected').text(), "HH:mm");
}

$('.time-field').on('change', function() {
  updateTimeDiff()
});

// Main
$.initTimeFields(15);
$('.time-field').trigger('change');

＆＃13;

label { display: inline-block; width: 3em; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>

<label>Start: </label><select id="start-time" class="time-field" data-value="06:30"></select><br />
<label>End:   </label><select id="end-time"   class="time-field" data-value="10:00"></select><br />
<label>Diff:  </label><input  id="hour-diff"  type="text"  size="8" />

＆＃13;

Moment.js格式的区别

3 个答案: