javascript - 添加时间类型的输入值 -html

Question

我有这段代码，我添加了两个带有时间类型的输入，我尝试将它们添加在一起，这就是我在下面附加的尝试。

任何人都知道如何做到这一点，我将根据下面的内容进行讨论。

   setInterval(function () {
        sum_diff();
    }, 1000);
	
	
function sum_diff() {

       zxc = document.getElementById("id_actual_1").value;
       xcz = document.getElementById("id_actual_2").value; 
       czx= document.getElementById("id_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 diff = zxcDate.getTime() + xczDate.getTime  + czxDate.getTime;
       	var hours = Math.floor(diff / 1000 / 60 / 60);
        diff -= hours * 1000 * 60 * 60;
       
        var minutes = Math.floor(diff / 1000 / 60);
        
               return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes;
 }
 
  setInterval(function () {
        document.getElementById("id_sum_actual").value =  sum_diff();
    }, 1000);

<input type="time" id="id_actual_1" />
<input type="time" id="id_actual_2" />
<input type="time" id="id_actual_3" />
<input type="time" id="id_sum_actual" readonly />

另外，如何在 javascript 端循环代码？

Answer 1

我不知道你为什么使用setInterval，但这不是监视事件的好方法。相反，使用事件监听器，请参阅下面的示例..

在这里，我将时间转换为毫秒并检索小时和分钟

      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("id_actual_1").value;
        xcz = document.getElementById("id_actual_2").value;
        czx = document.getElementById("id_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("time");
      for (var i = 0; i < elements.length; i++) {
        elements[i].addEventListener("change", function(e) {
          document.getElementById("id_sum_actual").value = sum_diff();
        });
      }
 

<input class="time" type="time" id="id_actual_1" value="00:00" />
<input class="time" type="time" id="id_actual_2" value="00:00" />
<input class="time" type="time" id="id_actual_3" value="00:00" />
    <input type="text" id="id_sum_actual" readonly />