用输入类型=“时间”做数学答案

【问题标题】：Doing math with input type="time"用输入类型=“时间”做数学
【发布时间】：2021-05-10 09:39:49
【问题描述】：

我正在尝试使用输入 type="time" 值做一个时间计算器，但结果是 NaN。这是我的代码：

document.getElementById("MathButton").onclick = timeCalc;

function timeCalc() {

    let startTime = document.getElementById("startTime").value;
    let endTime = document.getElementById("endTime").value;
    let diff = endTime - startTime;
    document.getElementById("diff").innerHTML = (diff);
    console.log(diff);
    console.log(startTime, endTime);

<div>
        <p>START</p>
        <input type="time" id="startTime" name="start" value="08:00"><br />
        <p>END</p>
        <input type="time" id="endTime" name="end" value="16:30">
        <br />
        <button id="MathButton">Calculate!</button>
        <br />
        <p>Total: <br /> <span id="diff"></span>&nbsp; hours.</p>
    </div>

我只是无法让它进行数学运算，但如果我将 startTime 和 endTime 添加到控制台日志，我可以看到这两个值都存在。

**我接受 Doan 的回答是正确的，因为它是最少的代码并且可以完成工作。我能够理解他把我的时间变成了日期对象，但由于我对此相对较新，我希望得到更多的解释。不过能够弄清楚，并使用这些知识构建我的程序的下一部分。

【问题讨论】：

标签： javascript math input time types

【解决方案1】：

两个字符串相减将得到 NaN。在这里，我先将两个字符串都转换为日期，然后再减去它。由于减去两个日期得出的结果以毫秒为单位，result/ 60 /60 /1000 将其转换为小时。

document.getElementById("MathButton").onclick = timeCalc;

   function timeCalc() {

let startTime = new Date().toDateString("yyyy-MM-dd") + " " + document.getElementById("startTime").value;
let endTime = new Date().toDateString("yyyy-MM-dd") + " " + document.getElementById("endTime").value;
let diff = (new Date(endTime) - new Date(startTime)) / 60/ 60 / 1000;
document.getElementById("diff").innerHTML = (diff);
console.log(diff);
}

<div>
        <p>START</p>
        <input type="time" id="startTime" name="start" value="08:00"><br />
        <p>END</p>
        <input type="time" id="endTime" name="end" value="16:30">
        <br />
        <button id="MathButton">Calculate!</button>
        <br />
        <p>Total: <br /> <span id="diff"></span>&nbsp; hours.</p>
    </div>

【讨论】：

【解决方案2】：

给你

document.getElementById("MathButton").onclick = timeCalc;

function timeCalc() {
    let startTime = document.getElementById("startTime").value;
    let endTime = document.getElementById("endTime").value;

     //create date format          
     var timeStart = new Date("01/01/2007 " + startTime );
     var timeEnd = new Date("01/01/2007 " + endTime );

     var diff= timeEnd - timeStart;             

     diff= diff/ 60 / 60 / 1000;
     document.getElementById("diff").innerHTML = (diff);
}

<div>
        <p>START</p>
        <input type="time" id="startTime" name="start" value="08:00"><br />
        <p>END</p>
        <input type="time" id="endTime" name="end" value="16:30">
        <br />
        <button id="MathButton">Calculate!</button>
        <br />
        <p>Total: <br /> <span id="diff"></span>&nbsp; hours.</p>
    </div>

【讨论】：

【解决方案3】：

你不能先减去两个字符串，你必须将它们转换为整数才能对它们应用数学运算。只需将它们按 ':' 拆分即可-

         startTime.split(":") 
         endTime.split(":") 
         diff = toString(startTime[0]- startTime[0])+":"+toString(startTime[1]- 
         startTime[1])

这将形成一个列表，然后按索引超出元素以减去它们 startTime[0] 几个小时，依此类推

【讨论】：