两个HTML时间输入之间的区别

Question

我想计算两个HTML时间输入元素之间的差异。当其中一个时间被更改时，必须重新计算，但我不能为彼此做到这一点。谁能帮帮我？

    <input type="time"  id="start" value="10:00" >
<input type="time" id="end" value="12:30" >

<input id="diff">


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

document.getElementById("diff").value = diff(start, end);
</script>

- Marvin

---

每次发生更改事件时，您需要获取“start”和“end”的值，而不是在它们设置之前仅获取一次。 - Heretic Monkey

我该怎么做呢？ :) - Marvin

好的，逻辑思考一下。当更改事件发生时会发生什么？现在，你正在调用 diff(start,end)。如果你需要在调用之前获取 start 和 end 元素的值，你会想把它放在哪里呢？也许是在调用 diff(start, end) 之前... - Heretic Monkey

Answer 1

这个时间差代码很棒！所以，如果你只需要它自动更新，我已经为你复制并稍作修改了你的代码。再次感叹你的代码真是太棒了 :)

<input type="time"  id="start" value="10:00" >
<input type="time" id="end" value="12:30" >

<input id="diff">


<script>
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();
    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("diff").value = diff(start, end);}, 1000); //to update time every second (1000 is 1 sec interval and function encasing original code you had down here is because setInterval only reads functions) You can change how fast the time updates by lowering the time interval
</script>

如果这是您想要的内容，那太好了。如果不是，请告诉我，我很乐意帮助您完善这段优秀的代码 :)

- The Bomb Squad

---

谢谢！你很棒！ - Marvin

Answer 2

使用你的代码，你只需一次获取start和end的值..每次计算差值时都需要重新获取这些值。

试着去做。

document.getElementById("start").onchange = function() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
diff(start,end)};

并且对于另一个元素也是同样的情况。

- Biagio Boi

Answer 3

//您可以创建一个函数，它返回两个时间之间的小时差，它接受格式为“hh:mm”的时间字符串作为参数；

    function timeDiffInHours(time1, time2){
    time1Arr = time1.split(":");
    time1InMinutes = parseInt(time1Arr[0])*60+parseInt(time1Arr[1]);
    time2Arr = time2.split(":");
    time2InMinutes = parseInt(time2Arr[0])*60+parseInt(time2Arr[1]);
    diff = time2InMinutes - time1InMinutes;
    return Math.floor(100*diff/60)/100;
}

console.log(timeDiffInHours("08:30","18:30"); //响应：10

- Khalid Ait tirite