如何将 X 小时减去时间字段

Question

我想在 div 中输出数学计算（减法）的结果。具体来说，我有一个带有 <input type="time" id="time" name="time"> 的表单，让用户可以选择时间。我想在另一个 div 中显示所选时间的结果 - 3 小时。

所以如果选择的时间是 13:00 我想在 div 中输出 class result-1 10:00.

如何在 JS 中实现这个？

<form action="/action_page.php">
  <label>Time:</label>
  <input type="time" id="time" name="time">
</form>

<div>
  <h1>Dispaly the result of Time - 3 Hours</h1>
  <div class="result-1">Result</div>
</div>

我尝试复制解释的内容 here 但没有结果？

Answer 1

当您从<input>元素读取数据时，不能直接使用数学库，因为它读取的是String类型的数据。所以我开发了两种不同的解决方案，它们表现出两种不同的行为。

行为 1

以下解决方案根据存储在 secondTime 数组中的时间提取所选时间值。

const time1 = document.getElementById('time1');
let result = document.getElementById('result');

// If you want to calculate the difference to the fixed time point,
// change the contents of the secondTime array.
let firstTime = []; secondTime = ["03", "00"]

// Function that prints the time difference to the DOM
function calculate() {
  if(firstTime.length != 0) {
    var hours = firstTime[0] - secondTime[0];
    var minutes = firstTime[1] - secondTime[1];
    result.innerHTML = "";
    result.insertAdjacentHTML("beforeend", `${hours}:${minutes}`);
  } 
}

// Event fired when <input> element changes 
time1.onchange = function() {
  firstTime = this.value.split(":");
  calculate();
}

#result {
  color: red;
}

<form action="/action_page.php">
  <label>First Time:</label>
  <input type="time" id="time1" name="time">
</form>

<div>
  <h1>Dispaly the result of Time - 3 Hours</h1>
  <div class="result-1">Result: <span id="result"></span></div>
</div>

行为 2

在下面的解决方案中，<input>元素中的值使用String.prototype.split()方法解析，时间差使用calculate()方法计算。编辑 calculate() 方法以获得更准确的计算。

const time1 = document.getElementById('time1');
const time2 = document.getElementById('time2');
let result = document.getElementById('result');
let firstTime = [], secondTime = [];

function calculate() {
  if(firstTime.length != 0 && secondTime.length != 0) {
    var hours = secondTime[0] - firstTime[0];
    result.innerHTML = "";
    result.insertAdjacentHTML("beforeend", `${hours} Hours`);
  } 
}

time1.onchange = function() {
  firstTime = this.value.split(":");
  calculate();
}

time2.onchange = function() {
  secondTime = this.value.split(":");
  calculate();
}

#result {
  color: red;
}

<form action="/action_page.php">
  <label>First Time:</label>
  <input type="time" id="time1" name="time">
  
  <label>Second Time:</label>
  <input type="time" id="time2" name="time">
</form>

<div>
  <h1>Dispaly the result of Time - 3 Hours</h1>
  <div class="result-1">Result: <span id="result"></span></div>
</div>

Answer 2

首先你应该将字符串时间转换为整数然后你可以减去。

<html>
   <script>
      function subTime(t,x) {
        var t1 = t.split(':');
        var x1 = x.split(':');
  
        var tx0 =parseInt(t1[0])- parseInt(x[0]);
        var tx1 =parseInt(t1[1])- parseInt(x[1]);
        if(tx1<0){tx1+=60;tx0--;}
        if(tx0<0){tx0+=12}
        if(tx0<10){tx0="0"+tx0}
        if(tx1<10){tx1="0"+tx1}
        return tx0+":"+tx1;
      }

      function showTime(e){
        var x = "3"+"00";
        document.getElementById('res').innerText =  subTime(e.target.value, x)
      }
   </script>
   <body>
      <input type="time" id="time" onChange='showTime(event);'/>
      <div id='res'></div>
   </body>
</html>

如何将 X 小时减去时间字段

How to subtract X hours to a time field

html

javascript

css

calculation

行为 1

行为 2