Описание ситуации:
У меня есть входы времени, описанные в class = "start", и входы времени, описанные в class = "end". Разница рассчитывается на основе уравнения «конец-начало = факт»; «фактические» - входные данные времени. Фактические входы должны складываться и записываться на вход с id = "sum_actual" (type = text)
Проблема:
У меня есть два проблемы в этом вопросе:
a) Я не знаю, как l oop код, который суммирует отдельные входные данные: класс = фактический, в конечном счете их более 30
b) код написано так, что мне нужно вручную ввести время в классе ввода = фактическое, чтобы оно обновлялось до всей суммы, когда результат вычисляется автоматически, он не складывается
Примечания:
в конечном счете, класс = фактические входные данные будут доступны только для чтения
в конечном итоге есть несколько других столбцов с входами (неважно) между началом и концом и фактическими входами (косметика, я обращаю внимание на способ написания кода)
Мой код / я пробовал этот код выше в javascript должен быть улучшен
//code that sums values from the actual class / should loop it
function msToTime(duration) {
var minutes = Math.floor((duration / (1000 * 60)) % 60),
hours = Math.floor(duration / (1000 * 60 * 60));
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
return hours + ":" + minutes;
}
console.log(msToTime(300000));
function sum_diff() {
zxc = document.getElementById("actual_1").value;
xcz = document.getElementById("actual_2").value;
czx = document.getElementById("actual_3").value;
zxc = zxc.split(":");
xcz = xcz.split(":");
czx = czx.split(":");
var zxcDate = new Date(0, 0, 0, zxc[0], zxc[1], 0);
var xczDate = new Date(0, 0, 0, xcz[0], xcz[1], 0);
var czxDate = new Date(0, 0, 0, czx[0], czx[1], 0);
var zxcMs =
zxcDate.getHours() * 60 * 60 * 1000 +
zxcDate.getMinutes() * 60 * 1000;
var xczMs =
xczDate.getHours() * 60 * 60 * 1000 +
xczDate.getMinutes() * 60 * 1000;
var czxMs =
czxDate.getHours() * 60 * 60 * 1000 +
czxDate.getMinutes() * 60 * 1000;
var ms = zxcMs + xczMs + czxMs;
return msToTime(ms);
}
var elements = document.getElementsByClassName("actual");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("change", function(e) {
document.getElementById("sum_actual").value = sum_diff();
});
}
// code calculating differences start from end and writing to actual / do not touch it
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] = [...tr.querySelectorAll('.start,.end,.actual')]
const value = diff(start.value, end.value)
actual.value = value
}
})
<table>
<tbody>
<tr>
<td><input class="start" type="time"/></td>
<td><input class="end" type="time"/></td>
<td><input class="actual" type="time" id="actual_1" value="00:00" /></td>
</tr>
<tr><td><input class="actual" type="time" id="actual_2" value="00:00" /></td></tr>
<tr><td><input class="actual" type="time" id="actual_3" value="00:00" /></td></tr>
</tbody>
<tfoot>
<tr><th><input type="text" id="sum_actual" readonly /></th></tr>
</tfoot>
</table>
Примечание: спасибо, оказалось, что у меня проблема со скриптом подсчета, и он считает только 99:59, может вы меняете этот лимит? показывать часы до 300: 00?