javascript - 值的自动求和/代码循环

Question

情况描述:

我有 class =“start”中描述的时间输入和 class =“end”中描述的时间输入。差异是根据等式“结束-开始 = 实际”计算的。“实际”是时间输入。实际输入应相加并写入 id = "sum_actual"(type = text) 的输入

问题:

1. 我在这个问题上有两个问题:

   a)我不知道如何循环总结各个输入的代码，class=actual，最终有超过30个

   b)代码的编写方式是我必须在输入类=实际中手动输入时间，以便它更新为整个总和，当结果自动计算时，它不会相加

注释:

1. 最终，class = 实际输入将是只读的

2. 最终还有其他几个带有输入的列(不重要)开始和结束与实际输入之间(化妆品，我注意编写代码的方式)

我的代码/我尝试过上面的 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 之前的营业时间？

Answer 1

当遇到这种情况时，我喜欢将大问题分解为非常小的问题，并制作非常小的函数，只做一件事，但做得很好:

const actuals = [...document.getElementsByClassName("actual")];

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

// Update total duration once on load
updateActualSum();

function msToTime(duration) {
  const minutes = Math.floor((duration / (1000 * 60)) % 60),
        hours = Math.floor(duration / (1000 * 60 * 60));
  return twoOrMoreDigits(hours) + ":" + twoOrMoreDigits(minutes);
}

function twoOrMoreDigits(n) {
  return n < 10 ? '0' + n : n;
}

function timeToMs(time) {
  if (time) { // may be "" if the value is not set
    const [hours, minutes] = time.split(":").map(str => parseInt(str, 10));
    return (hours * 60 + minutes) * 60 * 1000;
  }
  return 0;
}

function sum_diff() {
  const sum = actuals.reduce((acc, el) => acc + timeToMs(el.value), 0);
  return msToTime(sum);
}

function diff(start, end) {
  return msToTime(timeToMs(end) - timeToMs(start));
}

function updateActualSum() {
  document.getElementById('sum_actual').value = sum_diff();
}

body {font-family: Arial, Helvetica, sans-serif; } table { border-collapse: collapse; } td, th { border: 1px solid #ddd; padding: .2rem; } input[readonly] { background: #f5f5f5; border: none; font-family: inherit; text-align: center; padding: .2rem; }

<table>
  <tbody>
    <thead>
      <tr>
        <th>Start</th>
        <th>End</th>
        <th>Duration</th>
      </tr>
    </thead>
    <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" readonly /></td>
    </tr>
    <tr>
      <td><input class="start" type="time" /></td>
      <td><input class="end" type="time" /></td>
      <td><input class="actual" type="time" id="actual_2" value="00:00" readonly /></td>
    </tr>
    <tr>
      <td><input class="start" type="time" /></td>
      <td><input class="end" type="time" /></td>
      <td><input class="actual" type="time" id="actual_2" value="00:00" readonly /></td>
    </tr>
    <tr>
      <td><input class="start" type="time" /></td>
      <td><input class="end" type="time" /></td>
      <td><input class="actual" type="time" id="actual_2" value="00:00" readonly /></td>
    </tr>
    <tr>
      <td><input class="start" type="time" /></td>
      <td><input class="end" type="time" /></td>
      <td><input class="actual" type="time" id="actual_3" value="00:00" readonly /></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3"><input type="text" id="sum_actual" readonly /></th>
    </tr>
  </tfoot>
</table>