javascript - 如何将两个输入时间值相加并显示在另一个输入框中？

Question

我从用户那里得到两个持续时间，当前时间和前一个时间。现在，我想计算第三个文本框上显示的总时间。

<p><span>Current Duration</span><input id="txt1" onblur="sum();" type="text" autocomplete="off" name="current_duration" value="" /></p>
<p><span>Previous Duration</span><input id="txt2" onblur="sum();" type="text" autocomplete="off" name="previous_duration" value="" /></p>
<p><span>Total Duration</span><input id="txt3" type="text" readonly autocomplete="off" name="total_duration" value="" /></p>
<script>

    function sum() {
        var txtFirstNumberValue = document.getElementById('txt1').value;
        var txtSecondNumberValue = document.getElementById('txt2').value;

        var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
        if (!isNaN(result)) {
            document.getElementById('txt3').value = result;

        }
    }
</script>

我怎样才能实现同样的功能？你们能帮我吗？

Answer 1

假设时间和分钟之间的分隔符是“.”，这样就可以了。如果我需要另一个分隔符，只需替换 toTime() 和 fromTime() 中的字符

<p><span>Current Duration</span><input id="txt1" onblur="sum();" type="text" autocomplete="off" name="current_duration" value="" /></p>
<p><span>Previous Duration</span><input id="txt2" onblur="sum();" type="text" autocomplete="off" name="previous_duration" value="" /></p>
<p><span>Total Duration</span><input id="txt3" type="text" readonly autocomplete="off" name="total_duration" value="" /></p>

<script>
function sum() {
    var txtFirstNumberValue = document.getElementById('txt1').value;
    var txtSecondNumberValue = document.getElementById('txt2').value;

    var result = fromTime(txtFirstNumberValue) + fromTime(txtSecondNumberValue);

    if (!isNaN(result)) {
        document.getElementById('txt3').value = toTime(result);
    }
}

function fromTime(time) {
    var timeArray = time.split('.');
    var hours = parseInt(timeArray[0]);
    var minutes = parseInt(timeArray[1]);

    return (hours * 60) + minutes;
}

function toTime(number) {
    var hours = Math.floor(number / 60);
    var minutes = number % 60;

    return hours + "." + (minutes <= 9 ? "0" : "") + minutes;
}
</script>

JsFiddle