在javascript或jquery中使用keyup以HH:mm为单位计算时差

有6个输入字段，其中5个输入框将填充时间，结果必须出现在第6个输入框中。 html:

我从添加两次的示例中获取了代码。但是我不知道在键控中如何添加其他三个时间，第六个框中的结果是秒，我想将其设置为HH:mm。请帮忙。

---

谢谢

以HH:mm格式计算差异：

var d1 = new Date(2025, 10, 28, 10, 25, 48, 498);
var d2 = new Date(2025, 10, 28, 12, 28, 32, 500);
var diff = d2 - d1; // it is difference in milliseconds

var totalHours = 1.0 * diff / 1000 / 60 / 60;
var hours = Math.floor(totalHours);
var minutes = Math.floor((totalHours - hours) * 60);

if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;

console.log(hours + ":" + minutes);

var d1=新日期（2025、10、28、10、25、48、498）；
var d2=新日期（2025年、10年、28年、12年、28年、32年、500年）；
var diff=d2-d1；//这是以毫秒为单位的差异
var总小时数=1.0*diff/1000/60/60；
var小时=数学楼层（总小时）；
var分钟=数学地板（（总小时数-小时数）*60）；
如果（小时<10）小时=0“+小时；
如果（分钟<10）分钟=“0”+分钟；
控制台日志（小时+：“+分钟）；

给你：

$(document).ready(function(){
    var $time1 = $("#start");
    var $time2 = $("#end");
    var $time3 = $("#lunch");
    var $time4 = $("#startafterlunch");
    var $time5 = $("#endafterlunch");
    var $diff = $("#totalTime");

    function updateHours(){   

        var dtStart = new Date("7/20/2015 " + $time1.val());
        var dtEnd = new Date("7/20/2015 " + $time2.val());
        var dtLunch= new Date("7/20/2015 " + $time3.val());
        var dtStartafterlunch = new Date("7/20/2015 " + $time4.val());
        var dtEndafterlunch = new Date("7/20/2015 " + $time5.val());

        var diff = ((dtEnd - dtStart)+(dtEndafterlunch-dtStartafterlunch)) / 1000;

        var hours = parseInt( diff / 3600 ) % 24;
        var minutes = parseInt( diff / 60 ) % 60;
        var seconds = diff % 60;

        var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);

        $diff.val(result);
    }

    $("#start, #end, #lunch, #startafterlunch, #endafterlunch, #totalTime").on("change, keyup", function(){
        if($time1.val() && $time2.val() && $time4.val() && $time5.val()){
            updateHours();
        }
    });
});

$（文档）.ready（函数（）{
变量$time1=$（“#开始”）；
变量$time2=$（“#结束”）；
var$time3=$（“午餐”）；
变量$time4=$（“午餐后开始”）；
var$time5=$（“#endafter午餐”）；
变量$diff=$（“#总时间”）；
函数updateHours（）{
var dtStart=新日期（“2015年7月20日”+$time1.val（））；
var dtEnd=新日期（“2015年7月20日”+$time2.val（））；
var dtLunch=新日期（“7/20/2015”+$time3.val（））；
var dtstartafterflunch=新日期（“2015年7月20日”+$time4.val（））；
var dtendafter午餐=新日期（“2015年7月20日”+$time5.val（））；
var diff=（（dtEnd-dtStart）+（dtendafter午餐dtstartaafter午餐））/1000；
var小时=parseInt（差异/3600）%24；
var分钟数=parseInt（差异/60）%60；
var秒数=差异%60；
var结果=（小时<10？“0”+小时：小时）+“：”+（分钟<10？“0”+分钟：分钟）+“：”+（秒<10？“0”+秒：秒）；
$diff.val（结果）；
}
$（“#开始，#结束，#午餐，#开始午餐后，#结束午餐后，#总时间”）。打开（“更改，键控”，函数（）{
如果（$time1.val（）&&$time2.val（）&&&$time4.val（）&&$time5.val（））{
更新小时数（）；
}
});
});

输入哪个日期之间的差异？任意日期！我只想计算一下时间差。。。只有一个日期和不同的时间。。。开始时间，结束时间午餐，然后再次开始时间午餐后和结束时间午餐后您能告诉我如何计算如果时间超过8:00小时，则必须转到加班输入字段并显示剩余时间。。。请不要手动输入日期，我们可以动态地输入日期吗？如何输入？感谢ot@BlažOražem。。。我需要一个小忙，而不是把“7/20/2015”我想输入日期动态保持一个输入日期字段在html。。。所有时间字段的日期都将相同。请帮帮我。非常感谢……：）：）@BlažOražemi如果我想在html表中重复相同的字段作为行5或6次，那么它就不会显示总答案和超时答案。。。它只在第一排给出它。。。我必须做什么才能得到其他人的答案？

var d1 = new Date(2025, 10, 28, 10, 25, 48, 498);
var d2 = new Date(2025, 10, 28, 12, 28, 32, 500);
var diff = d2 - d1; // it is difference in milliseconds

var totalHours = 1.0 * diff / 1000 / 60 / 60;
var hours = Math.floor(totalHours);
var minutes = Math.floor((totalHours - hours) * 60);

if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;

console.log(hours + ":" + minutes);

$(document).ready(function(){
    var $time1 = $("#start");
    var $time2 = $("#end");
    var $time3 = $("#lunch");
    var $time4 = $("#startafterlunch");
    var $time5 = $("#endafterlunch");
    var $diff = $("#totalTime");

    function updateHours(){   

        var dtStart = new Date("7/20/2015 " + $time1.val());
        var dtEnd = new Date("7/20/2015 " + $time2.val());
        var dtLunch= new Date("7/20/2015 " + $time3.val());
        var dtStartafterlunch = new Date("7/20/2015 " + $time4.val());
        var dtEndafterlunch = new Date("7/20/2015 " + $time5.val());

        var diff = ((dtEnd - dtStart)+(dtEndafterlunch-dtStartafterlunch)) / 1000;

        var hours = parseInt( diff / 3600 ) % 24;
        var minutes = parseInt( diff / 60 ) % 60;
        var seconds = diff % 60;

        var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);

        $diff.val(result);
    }

    $("#start, #end, #lunch, #startafterlunch, #endafterlunch, #totalTime").on("change, keyup", function(){
        if($time1.val() && $time2.val() && $time4.val() && $time5.val()){
            updateHours();
        }
    });
});