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

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。

编辑：下面的代码段

 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> 

Answer 2

选择Moment.JS库，因为在处理日期和时间时香草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>