基于起止时间计算总分钟数并实时显示的技术实现需求

直接添加JavaScript代码即可实现实时计算时间差并显示总分钟数的功能，以下是完整实现：

<div class="col-lg-3 col-sm-6">
  <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 class="col-lg-3 col-sm-6">
  <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 class="col col-sm">
  <div class="form-floating">
    <input id="time" class="form-control" name="time" type="text" value="30" readonly />
    <label for="time">Time</label>
  </div>
</div>

<script>
// 获取DOM元素
const startTimeInput = document.getElementById('stime');
const endTimeInput = document.getElementById('etime');
const totalMinutesInput = document.getElementById('time');

// 计算时间差并更新输入框的函数
function calculateTotalMinutes() {
  // 将时间字符串拆分为小时和分钟
  const [startHour, startMinute] = startTimeInput.value.split(':').map(Number);
  const [endHour, endMinute] = endTimeInput.value.split(':').map(Number);
  
  // 转换为总分钟数
  const startTotal = startHour * 60 + startMinute;
  const endTotal = endHour * 60 + endMinute;
  
  // 计算时间差（处理跨天情况，比如结束时间早于开始时间时，默认加24小时）
  let totalMinutes = endTotal - startTotal;
  if (totalMinutes < 0) {
    totalMinutes += 24 * 60;
  }
  
  // 更新到目标输入框
  totalMinutesInput.value = totalMinutes;
}

// 初始化计算（页面加载时执行一次）
calculateTotalMinutes();

// 给开始和结束时间输入框添加事件监听，实时计算
startTimeInput.addEventListener('input', calculateTotalMinutes);
endTimeInput.addEventListener('input', calculateTotalMinutes);
</script>

关键说明： #

• 给time输入框添加了readonly属性，避免用户手动修改计算结果，保持数据一致性
• 处理了跨天场景：如果结束时间早于开始时间（比如开始时间23:00，结束时间01:00），会自动加上24小时的分钟数，得到正确的间隔
• 页面加载时会自动执行一次计算，确保初始值正确
• 只要开始或结束时间发生变化，就会实时更新总分钟数

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