Question

我从这里得到了一个满足我需求的代码，直到我需要处理两个以上的输入来计算时间差之前，这还是很不错的

我编辑了代码，可以输入一组输入

    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    document.getElementById("start").onchange = function() {diff(start,end)};
    document.getElementById("end").onchange = function() {diff(start,end)};
    
    function diff(start, end) {
        start = document.getElementById("start").value; //to update time value in each input bar
        end = document.getElementById("end").value; //to update time value in each input bar
        start = start.split(":");
        end = end.split(":");
        var startDate = new Date(0, 0, 0, start[0], start[1], 0);
        var endDate = new Date(0, 0, 0, end[0], end[1], 0);
        var diff = (endDate.getTime() - startDate.getTime())/1000/60;
        return diff;
    }

    setInterval(function(){
        document.getElementById("diff").value = diff(start, end);
    }, 500);

<input type="time"  id="start1" value = "08:15" >
    <input type="time" id="end1" value = "08:35"  >
    <input id="diff1">
    <br>
    <input type="time"  id="start2" value = "08:36" >
    <input type="time" id="end2" value = "08:39">
    <input id="diff2">
    <br>
    <input type="time"  id="start3" value = "08:40" >
    <input type="time" id="end3" value = "09:15">
    <input id="diff3">
    <br>
    <input type="time"  id="start4"  >
    <input type="time" id="end4" >
    <input id="diff4">
    <br>
    <input type="time"  id="start5"  >
    <input type="time" id="end5" >
    <input id="diff5">

我的预期结果是像第一个一样更新所有差异输入

Answer 1

<input type="time"  id="start1" value = "08:15" >
<input type="time" id="end1" value = "08:35"  >
<input id="diff1">
<br>
<input type="time"  id="start2" value = "08:36" >
<input type="time" id="end2" value = "08:39">
<input id="diff2">
<br>
<input type="time"  id="start3" value = "08:40" >
<input type="time" id="end3" value = "09:15">
<input id="diff3">
<br>
<input type="time"  id="start4"  value = "08:40">
<input type="time" id="end4" value = "08:40">
<input id="diff4">
<br>
<input type="time"  id="start5" value = "08:40" >
<input type="time" id="end5" value = "08:40">
<input id="diff5">

这是您的JS中的更改

    <script>

document.getElementById("end1").onchange=document.getElementById("start1").onchange = function() {
    updateDiff('start1','end1','diff1')
};

document.getElementById("end2").onchange=document.getElementById("start2").onchange = function() {
    updateDiff('start2','end2','diff2')
};
document.getElementById("end3").onchange=document.getElementById("start3").onchange = function() {
    updateDiff('start3','end3','diff3')
};
document.getElementById("end4").onchange=document.getElementById("start4").onchange = function() {
    updateDiff('start4','end4','diff4')
};
document.getElementById("end5").onchange=document.getElementById("start5").onchange = function() {
    updateDiff('start5','end5','diff5')
};


function updateDiff(start, end, diff) {
    start = document.getElementById(start).value;
    end = document.getElementById(end).value; 
    start = start.split(":");
    end = end.split(":");
    var startDate = new Date(0, 0, 0, start[0], start[1], 0);
    var endDate = new Date(0, 0, 0, end[0], end[1], 0);
    document.getElementById(diff).value = (endDate.getTime() - startDate.getTime())/1000/60;
}

setInterval(function(){

}, 500); 
</script>

这里updateDiff是一个函数，它需要3个id（开始，结束，差异），它计算差值并以第3个id的值进行更新，此函数在每次传递不同参数时在所有5种情况下都可以重复使用

正如其他人也提到的那样，您需要了解事情的运作方式。了解有关如何使用函数，如何传递参数，按ID或类访问元素的信息

如何动态获取多个开始时间和结束时间的时差

1 个答案: