在 javascript 或 jquery 中使用 keyup 计算 HH:mm 的时间差答案

【问题标题】：calculate time difference in HH:mm using keyup in javascript or jquery在 javascript 或 jquery 中使用 keyup 计算 HH:mm 的时间差
【发布时间】：2015-10-28 06:47:51
【问题描述】：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="time" id="start" name="logintime"/>
<input type="time" id="end"name="logouttime" />
<input type="time" id="lunch" name="lunch" />
<input type="time" id="startafterlunch" name="afterlunchlogin"/>
<input type="time" id="endafterlunch" name="afterlunchlogout"/>
<input id="totalTime" readonly="readonly" />

javascript：

$(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);

    $diff.val(diff/1000);
  }
$time1.add($time2).on("change, keyup", function(){
    if($time1.val() && $time2.val()){
        updateHours()
    }
});

});

我从添加两次的示例中获取代码。但我不知道如何在 keyup 中添加其他三个时间，而第 6 个框中的结果以秒为单位，我想将其设为 HH:mm。请帮忙。谢谢！！

【问题讨论】：

输入日期的区别？
任何日期！我只想计算时差
不...只有一个日期与不同的时间...开始时间，结束时间午餐，然后再次开始时间后午餐和结束时间后午餐

标签： javascript jquery html datetime time

【解决方案1】：

给你：

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

【讨论】：

你能告诉我如何计算如果工作时间超过 8:00 小时它必须加班输入字段并显示剩余时间......请
我们可以动态输入日期，而不是手动输入日期吗？
非常感谢@Blaž Oražem... 我需要一个小忙，而不是把“7/20/2015” 我想动态输入日期，在 html 中再保留一个输入日期字段。 . 日期对于所有时间字段都是相同的。请帮助我。
非常感谢... :) :) @Blaž Oražem
如果我想在 html 表中将相同的字段作为行重复 5 或 6 次，那么它不会显示总数和加班答案......它只给第一行......什么我必须做什么才能得到其他人的答案？

【解决方案2】：

以 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);

【讨论】：