Question

如何使用javascript以24小时制格式计算超过两个时间小时值(10:00 + 02:30 + 03:00) = 15:30？

请参阅随附的代码段，您可以看到目标是什么。不幸的是，我不知道如何完成它。

目前我使用以下代码计算三个文本字段。另请参阅jsfiddle

function output(){
  var value1 = document.getElementById('value1').value;
  var value2 = document.getElementById('value2').value;
  var value3 = document.getElementById('value3').value;
  document.getElementById('result1').innerHTML = (parseInt(value1) + parseInt(value2)) + parseInt(value3);
}

<input id="value1" type="text" onchange="output();" />
<span> + </span>
<input id="value2" type="text" onchange="output();" />
<span> + </span>
<input id="value3" type="text" onchange="output();" />
<p id="result1"> </p>

Answer 1

您可以先转换为分钟，然后在显示时转换为小时。

＆＃13;

<input id="value1" type="time" onchange="output();" />
<span> + </span>
<input id="value2" type="time" onchange="output();" />
<span> + </span>
<input id="value3" type="time" onchange="output();" />
<p id="result1"> </p>

＆＃13;

<label for="CAT_Custom_15"><b>How much would you like to be paid for selling this bottle?</b></label>
<input type="text" maxlength="4000" onchange="output()" name="CAT_Custom_15" id="CAT_Custom_15" class="cat_textbox price bborder" />

<label for="CAT_Custom_14">Cloudwine Commission 25%</label>
<input type="text" maxlength="4000" name="CAT_Custom_14" id="CAT_Custom_14" class="cat_textbox price" readonly="readonly" />

<label for="CAT_Custom_13">SELL PRICE INCLUDING TAX</label>
<input type="text" maxlength="4000" name="CAT_Custom_13" id="CAT_Custom_13" class="cat_textbox price" readonly="readonly" />

＆＃13;

Answer 2

我认为这会更容易实现。你需要进行格式检查，我建议使用onblur事件而不是每次按下键时触发的onchange。这是一个有效的解决方案：

http://jsfiddle.net/ibowankenobi/r7k6L38g/10/

var inputs = document.getElementsByTagName("input");
function output(){
    document.getElementById('result1').textContent = 
    Array.prototype.slice.call(inputs).reduce(function(ac,d,i,a){
    ac += d.value.split(":").reduce(function(ac,d,i){
            return ac += !i ? +d : +d/60
        },0);
        return i === a.length - 1 ? ac%24 : ac;
  },0);
}

根据需要格式化最终结果，我将其保留为十进制，否则在结尾处执行（ac＆lt;＆lt; 0）+“：”+（ac％1 * 60＆lt;＆lt; 0）

Answer 3

您可以让javascript引擎进行数学运算，而不是手动进行数学运算。将第一个值value1转换为虚拟日期格式，并添加其他2个值＆＃39;第一次约会的小时和分钟。

将3600000与hour和60000相乘minute

，将时数添加到目前为止

＆＃13;

function output(){
  var value1 = document.getElementById('value1').value;
  var value2 = document.getElementById('value2').value;
  var value3 = document.getElementById('value3').value;
  document.getElementById('result1').innerHTML = new Date(new Date('2018-04-26 '+value1).getTime()+ value2.split(':')[0]*3600000 + value2.split(':')[1]*60000 + value3.split(':')[0]*3600000 + value3.split(':')[1]*60000).toString().split(' ')[4];
}

＆＃13;

<input id="value1" type="text" onchange="output();" />
<span> + </span>
<input id="value2" type="text" onchange="output();" />
<span> + </span>
<input id="value3" type="text" onchange="output();" />
<p id="result1"> </p>

＆＃13;

数学函数 - ＆gt;加上基本的javascript时间

3 个答案: