使用 HTML 形式和 JavaScript 计算一天中两个时间之间的差异

Question

我正在尝试创建一个 HTML 表单，将一天中的两次作为输入（必须包含am/pm，不能是军用时间），用一个JavaScript函数计算这两个时间的差值，输出到屏幕上。

例如，我在 HTML 表格中输入 1:15 pm（未来时间）和 12:00 am（当前时间），屏幕输出为：

1:15 pm is 1 hour and 15 minutes away from 12:00 am.

我已经在军事时间工作了，但似乎无法弄清楚如何让计算机识别 am 和 pm 的值，所以如果你不知道整个问题的答案，任何想法关于如何解决它的这个特定部分也会有很多帮助。

这是我用来计算军用时间之间差异的方法：

请随时给我这个问题领域之外的建议，我是编程新手，如果我的代码有任何问题（结构、可读性、变量名等），我将不胜感激如何改进。

谢谢大家！

<meta charset="UTF-8">

<title> Calculate Time Difference </title>

<script type = "text/javascript">
  function calculateTimeDifference() {
    let input_CurrentTime = document.getElementById( "currentTime" );
    let input_FutureTime = document.getElementById( "futureTime" );
    let output_Difference = document.getElementById( "difference" );

    let currentTime = input_CurrentTime.value;
    if ( currentTime.includes( ":" ) ) {
      currentTime = currentTime.replace( ":". "" );
    }

    let futureTime = input_FutureTime
    if ( futureTime.includes( ":" ) ) {
      futureTime = futureTime.replace( ":", "" );
    }

    differenceEquation = futureTime - currentTime;
    output_Difference.value = futureTime + " is " + differenceEquation + " 
    away from " + currentTime;                                 
  }
</script>

<link rel = "stylesheet" type = "text/css" href = "textBoxes.css"/>

<h1> Caclulate Time Difference </h1>

<form action = "/">

    <fieldset>
        <label> Current Time: </label>
            <input type = "text" id = "currentTime"/>

        <label> Future Time: </label>
            <input type = "text" id = "futureTime"/>
            <input type = "button" value = "click me" onclick = "calculateTimeDifference()"/>

        <label> Time Difference: </label>
            <input type = "text" id = "difference"/>

    </fieldset>

</form>

Answer 1

如果你让它为军事时间工作，那么你可以将 AM/PM 时间转换为军事时间，然后使用你用于军事时间的任何时间。

如果有"AM"，那么去掉AM，就是军用时间
如果它有 "PM"，则删除 PM 并添加 12，这是军用时间（你必须 "mod 24" 总和，因为如果是下午 12 点，则为 24 点不是正确的军事时间，但 0 点钟是）。

以下是从 AM/PM 转换为军事时间的方法，这样您就可以将军事时间的逻辑应用于 AM/PM 字符串。


    var time = "1:15 pm";
    if (time.includes("pm")) {
        time = time.replace("pm",""); //remove the "pm" from the string since military time doesn't have that.
        var colon = time.indexOf(":"); //get the position of the colon so we can get the hours before the colon
        var hours = time.substring(0,colon);
        hours = parseInt(hours);
        hours = (12 + hours) % 24; //add the 12 and mod it in case it's 24 o'clock
        time = hours + ":" + time.substring(colon + 1, time.length);    
    } else {
        time = time.replace("am",""); //if it doesn't have pm then remove am and leave it since this is already military time
    }

使用 HTML 形式和 JavaScript 计算一天中两个时间之间的差异

Calculating the difference between two times of the day with an HTML form and JavaScript

html

javascript

forms

time

difference