javascript - 计算 HH :mm using keyup in javascript or jquery 中的时间差

Question

有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。请帮忙。谢谢!!

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