javascript - 从 Javascript 中的时间字段中减去持续时间

Question

我试图从时间值中减去午餐持续时间，但我似乎无法让它工作。以下是我正在使用的代码:

// get the values of the fields
var sStart = this.getField("StartTimeMonday").value;
var sEnd = this.getField("FinishTimeMonday").value;

// clear field as a default action
event.value = "";

// compute only if we have values
if (sStart != "" && sEnd != "") {

    // add a formatted date value to the time field values
    sStart = "1-Jan-1970 " + sStart;
    sEnd = "1-Jan-1970 " + sEnd;

    // convert the date time strings to date object
    var oStart = util.scand("d-mmm-yyyy h:MM tt", sStart);
    var oEnd = util.scand("d-mmm-yyyy h:MM tt", sEnd);

    // convert date object to milliseconds since 1-Jan-1970
    var nStart = oStart.getTime();
    var nEnd = oEnd.getTime();

    // compute the difference in milliseconds
    var nDiff = nEnd - nStart;

    // convert to seconds
    var nSeconds = Math.floor(nDiff / 1000);

    // compute the whole hours from the minutes
    var nHrs = Math.floor(nSeconds / 3600);

    // compute the remaining minutes
    var nMins = (nSeconds / 60) % 60;

    // set field value string to formatted time string
    event.value = nHrs + ":" + util.printf("%,202.0f", nMins);

} 

在显示之前，必须从最终值中减去包含午餐时间(在我的时间表中)的时间值的字段。例如，在下面的示例中，最终值应为 11:30。

我怎样才能实现这个目标？

Answer 1

鉴于您已经能够计算开始和结束时间，您应该能够继续执行以下逻辑:

从评论中不清楚您是否使用 24 小时格式。如果是的话上面的就好了。如果不是，则需要在 getMinutes 中添加另一行来拆分 am 或 pm，如果是 pm 则添加 12 >.

编辑:下面的片段

document.getElementById("btnStart").addEventListener('click', startRun);

var timeCardManager = (function() {
  function getMinutes(value, ampm) {
    var timeOffset = 0;
    var timeParts = value.split(':');
    if (ampm) timeOffset = value.split(' ')[1].charAt(0) == 'P' ? 12 : 0;
    return ((parseInt(timeParts[0]) + timeOffset) * 60) + parseInt(timeParts[1]);
  }

  function getShiftLength(startEl, endEl) {
    return getMinutes(endEl.innerHTML, true) - getMinutes(startEl.innerHTML, true);
  }

  function getBreaksLength(breaksElArr) {
    return breaksElArr.reduce(function(a, b) {
      return a + getMinutes(b.innerHTML)
    }, 0);
  }

  function getPaidShiftLength(start, end, breaks) {
    return getShiftLength(start, end) - getBreaksLength(breaks);
  }

  function formatMinutesTo24Hr(minutes) {
    var hrs = Math.floor(parseInt(minutes / 60));
    var mins = Math.floor(minutes % 60);
    return ("00" + hrs).substr(-2, 2) + ":" + ("00" + mins).substr(-2, 2);
  }

  var processShift = function(start, end, breaks) {
    return formatMinutesTo24Hr(getPaidShiftLength(start, end, breaks));
  }

  return {
    processShift: processShift
  }

})();

function startRun() {
  var breaks = [];
  breaks.push(document.getElementById('MealsTimeMonday'));
  var start = document.getElementById('StartTimeMonday');
  var end = document.getElementById('FinishTimeMonday');
  var total = document.getElementById('MondayTotal');
  total.innerHTML = timeCardManager.processShift(start, end, breaks);
}

table {
  color: #333;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 15px;
}
td,
th {
  border: 1px solid #CCC;
  height: 30px;
  width: 100px;
}
th {
  background: #F3F3F3;
  font-weight: bold;
}
td {
  background: #FAFAFA;
  text-align: center;
}

<table>
  <tr>
    <th id="">StartTime</th>
    <th id="">FinishTime</th>
    <th id="">MealTime</th>
    <th id="">Total</th>
  </tr>
  <tr>
    <td id="StartTimeMonday">6:00 AM</td>
    <td id="FinishTimeMonday">6:00 PM</td>
    <td id="MealsTimeMonday">0:30</td>
    <td id="MondayTotal"></td>
  </tr>
</table>
<button id="btnStart">Start</button>