從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

去爲Moment.JS LIB，香草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>

Answer 2

由於您已經能夠計算出開始和結束時間，因此您應該可以繼續使用以下邏輯：

如果您使用的是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>