实现时间选择器变更时自动更新时间差输入框的技术问询

你的代码目前仅在页面加载时计算一次时间差，要实现自动更新，需监听时间选择框的变化事件，每次内容变动时重新计算并更新结果输入框。具体实现方案如下：

核心思路 #

• 将时间差计算逻辑封装为可复用函数
• 为两个时间输入框绑定input事件，触发时调用计算函数
• 页面初始化时主动执行一次计算，显示初始时间差

修改后的完整代码 #

HTML部分（保持原结构不变） #

<div>
  <div class="form-floating">
    <input id="stime" class="form-control" required name="stime" type="time" value="12:00" />
    <label for="stime">Start Time</label>
  </div>
</div>

<div>
  <div class="form-floating">
    <input id="etime" class="form-control" required name="etime" type="time" value="12:30" />
    <label for="etime">End Time</label>
  </div>
</div>

<div>
  <div class="form-floating">
    <input id="time" class="form-control" name="time" type="text" />
    <label for="time">Time</label>
  </div>
</div>

JavaScript部分 #

// 时间字符串转总秒数的工具函数
const getSeconds = s => s.split(":").reduce((acc, curr) => acc * 60 + +curr, 0);

// 计算并更新时间差秒数的核心函数
function updateTimeDifference() {
  const startTimeSec = getSeconds(document.getElementById("stime").value);
  const endTimeSec = getSeconds(document.getElementById("etime").value);
  const totalDiffSec = Math.abs(endTimeSec - startTimeSec);
  // 将总秒数更新到结果输入框
  document.getElementById("time").value = totalDiffSec;
}

// 为两个时间选择框绑定输入事件，实时触发计算
document.getElementById("stime").addEventListener('input', updateTimeDifference);
document.getElementById("etime").addEventListener('input', updateTimeDifference);

// 页面加载完成后初始化显示初始时间差
window.addEventListener('load', updateTimeDifference);

关键说明 #

• input事件会在用户通过时间选择器或手动输入修改时间时触发，确保实时响应变化
• 封装独立计算函数既避免重复代码，也让初始化和事件触发的逻辑统一
• 若需要显示格式化的时间差（如HH:MM:SS），可在updateTimeDifference函数内调整最终赋值的逻辑

内容的提问来源于stack exchange，提问作者Nine Delos Reyes