Question

我试图从time值减去午餐时间，但我似乎无法让它运转起来。以下是我正在使用的代码：

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

}

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

我怎样才能做到这一点？

Answer 1

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

如果你使用24小时格式，评论中不清楚。如果是这样，上述情况就好了。如果不是，您需要getMinutes中的另一行来拆分am或pm，如果是pm则添加12。

编辑：下面的代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

去找Moment.JS lib，因为vanilla JS在处理日期和时间时会非常痛苦......

[编辑]

如果我理解你的问题，我认为这就是你想要的：

function f(){
  // get the values of the fields
  var sStart = document.getElementById("StartTimeMonday").innerHTML;
  var sEnd = document.getElementById("FinishTimeMonday").innerHTML;
  var sMeal = document.getElementById("MealTimeMonday").innerHTML;

    // convert the date time strings to date object
    var oStart = moment(sStart, "h:mm A");
    var oEnd = moment(sEnd, "h:mm A");

    // convert date object to seconds since 1-Jan-1970
    var nStart = oStart.format('X');
    var nEnd = oEnd.format('X');
    // just in seconds for this one
    var nMeal = moment.duration(sMeal);

    // compute the difference in seconds
    var oDiff = moment.duration(nEnd - nStart - nMeal.asSeconds(), 'seconds');
  
    // set field value string to formatted time string
    document.getElementById("Total").innerHTML =  oDiff.hours()+':'+oDiff.minutes();

}

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

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<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="MealTimeMonday">0:30</td>
    <td id="Total"></td>
  </tr>
</table>
<br>
<button onclick="f()">run</button>

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

2 个答案: