在javascript中計算工作時間的差異

Question

描述：我有：（在表中）

• 2 列包含要輸入的數據：

  a) 開始，

  b) 結束。 （信息：結束必須大於開始才能正常工作）

• 2 列的數據被計算/是常數：

  a) 實際（結束開始），

  b) 規范（const）

• 2 列包含我要計算的數據：

  a) 過剩，

  b) 不足

代碼操作：（現在正在運行）

• 用戶輸入字段：

  a) 開始

  b) 結束（必須大於開始）[跳過]

• 字段被計算

  a) 實際 = 結束 - 開始。

• 字段是續集。

  a) 規范的

我試圖實現的目標：

• 填寫字段：

  a）盈余（如何？=>盈余=實際規范）（如果實際>規范）

  b) 缺陷（如何？=> 缺陷 = 規范-實際）（如果實際 < 規范）

我嘗試了什么？：

 function diff (start, end) { start = start.split(":"); end = end.split(":"); const startDate = new Date(0, 0, 0, start[0], start[1], 0); const endDate = new Date(0, 0, 0, end[0], end[1], 0); let diff = endDate.getTime() - startDate.getTime(); const hours = Math.floor(diff / 1000 / 60 / 60); diff -= hours * 1000 * 60 * 60; const minutes = Math.floor(diff / 1000 / 60); return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes; } document.querySelector('table').addEventListener('change', function(e) { const classList = e.target.classList if (classList.contains('start') || classList.contains('end')) { //retrieve the associated inputs const tr = e.target.parentNode.parentNode const [start, end, actual, normative, surplus, deficiency] = [...tr.querySelectorAll('.start,.end,.actual,.normative,.surplus,.deficiency')] const value = diff(start.value, end.value) actual.value = value } }) // I tried: /* <-----------------------------comment if (actual.value > normative.value) { const value_an = diff_act_nor() surplus.value = value_an } else if (actual.value < normative.value) { const value_na = diff_nor_act() deficiency.value = value_na } else{ // do nothing } } function diff_nor_act (actual, normative) { actual = actual.split(":"); normative = normative.split(":"); const actualDate = new Date(0, 0, 0, actual[0], actual[1], 0); const normativeDate = new Date(0, 0, 0, normative[0], normative[1], 0); let diff = normativeDate.getTime() - actualDate.getTime(); const hours = Math.floor(diff / 1000 / 60 / 60); diff -= hours * 1000 * 60 * 60; const minutes = Math.floor(diff / 1000 / 60); return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes; function diff_act_nor (actual, normative) { actual = actual.split(":"); normative = normative.split(":"); const actualDate = new Date(0, 0, 0, actual[0], actual[1], 0); const normativeDate = new Date(0, 0, 0, normative[0], normative[1], 0); let diff = actualDate.getTime() - normativeDate.getTime(); const hours = Math.floor(diff / 1000 / 60 / 60); diff -= hours * 1000 * 60 * 60; const minutes = Math.floor(diff / 1000 / 60); return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes; ---comment-------------> */

 <table> <thead> <tr> <th>start</th> <th>end</th> <th>actual</th> <th>normative</th> <th>surplus</th> <th>deficiency</th> </tr> </thead> <tbody> <tr class="day"> <td><input type="time" class="start" id="start_1" value="08:00"></td> <td><input type="time" class="end" id="end_1" value="15:00"></td> <td><input type="time" class="actual" id="actual_1" value="07:00" readonly></td> <td><input type="time" class="normative" id="normative_1" value="08:00" readonly></td> <td><input type="time" class="surplus" id="surplus_1" value="00:00" readonly></td> <td><input type="time" class="deficiency" id="deficiency_1" value="00:00" readonly></td> </tr> <tr class="day"> <td><input type="time" class="start" id="start_2" value="08:00"></td> <td><input type="time" class="end" id="end_2" value="17:00"></td> <td><input type="time" class="actual" id="actual_2" value="09:00" readonly></td> <td><input type="time" class="normative" id="normative_2" value="08:00" readonly></td> <td><input type="time" class="surplus" id="surplus_2" value="00:00" readonly></td> <td><input type="time" class="deficiency" id="deficiency_2" value="00:00" readonly></td> </tr> </tbody> </table>

注釋代碼

a) 注釋代碼不起作用。

b) 取消注釋后，它會破壞現在可以正常工作的工作代碼

筆記：

a) 給定的“值”是隨機的，輸入以更好地說明情況

Answer 1

我加了

function diffMs(start, end) {
  return +start.split(":").join('') - +end.split(":").join('');
}

此功能可以幫助您出於邏輯目的計算差異

我更新了一個演示：

 function diff(start, end) { start = start.split(":"); end = end.split(":"); const startDate = new Date(0, 0, 0, start[0], start[1], 0); const endDate = new Date(0, 0, 0, end[0], end[1], 0); let diff = endDate.getTime() - startDate.getTime(); const hours = Math.floor(diff / 1000 / 60 / 60); diff -= hours * 1000 * 60 * 60; const minutes = Math.floor(diff / 1000 / 60); return (hours <= 9 ? "0" : "") + hours + ":" + (minutes <= 9 ? "0" : "") + minutes; } function diffMs(start, end) { // this function can help you calculate a difference for a logical purposes return +start.split(":").join('') - +end.split(":").join(''); } document.querySelector('table').addEventListener('change', function(e) { const classList = e.target.classList if (classList.contains('start') || classList.contains('end')) { //retrieve the associated inputs const tr = e.target.parentNode.parentNode const [start, end, actual, normative, surplus, deficiency] = [...tr.querySelectorAll('.start,.end,.actual,.normative,.surplus,.deficiency')] const value = diff(start.value, end.value); actual.value = value if (diffMs(actual.value, normative.value) >= 0) { surplus.value = diff(normative.value, actual.value); } if (diffMs(actual.value, normative.value) <= 0) { deficiency.value = diff(actual.value, normative.value); } } })

 <table> <thead> <tr> <th>start</th> <th>end</th> <th>actual</th> <th>normative</th> <th>surplus</th> <th>deficiency</th> </tr> </thead> <tbody> <tr class="day"> <td><input type="time" class="start" id="start_1" value="08:00"></td> <td><input type="time" class="end" id="end_1" value="15:00"></td> <td><input type="time" class="actual" id="actual_1" value="07:00" readonly></td> <td><input type="time" class="normative" id="normative_1" value="08:00" readonly></td> <td><input type="time" class="surplus" id="surplus_1" value="00:00" readonly></td> <td><input type="time" class="deficiency" id="deficiency_1" value="00:00" readonly></td> </tr> <tr class="day"> <td><input type="time" class="start" id="start_2" value="08:00"></td> <td><input type="time" class="end" id="end_2" value="17:00"></td> <td><input type="time" class="actual" id="actual_2" value="09:00" readonly></td> <td><input type="time" class="normative" id="normative_2" value="08:00" readonly></td> <td><input type="time" class="surplus" id="surplus_2" value="00:00" readonly></td> <td><input type="time" class="deficiency" id="deficiency_2" value="00:00" readonly></td> </tr> </tbody> </table>