如何用JavaScript对用户选择的时间执行小时减法运算？

没问题，我帮你搞定这个时间减法的需求！要实现用户选择的时间减去指定小时（比如1:00 AM减2小时得到11:00 PM），核心思路是先把12小时制转成24小时制计算，这样减法逻辑更清晰，算完再转回去就行。下面是修改后的完整代码，我会给你拆解关键步骤：

完整代码示例 #

<select id="selectHour">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
</select>
<select id="selectMinute">
  <option value="00">00</option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="15">15</option>
  <option value="20">20</option>
  <option value="25">25</option>
  <option value="30">30</option>
  <option value="35">35</option>
  <option value="40">40</option>
  <option value="45">45</option>
  <option value="50">50</option>
  <option value="55">55</option>
</select>
<select id="selectAMPM">
  <option value="am">am</option>
  <option value="pm">pm</option>
</select>
<button onclick="myFunction()">Calculate</button>
<p id="result"></p>

<script>
function myFunction() {
  // 这里定义要减去的小时数，你可以随时修改这个值
  const subtractHours = 2;
  
  // 获取用户选择的时间参数
  let hour = parseInt(document.getElementById("selectHour").value);
  const minute = document.getElementById("selectMinute").value;
  const ampm = document.getElementById("selectAMPM").value;
  
  // 把12小时制转成24小时制，方便计算
  let hour24;
  if (ampm === "am") {
    // 12 AM 对应24小时制的0点
    hour24 = hour === 12 ? 0 : hour;
  } else {
    // 12 PM 保持12，其他PM小时加12
    hour24 = hour === 12 ? 12 : hour + 12;
  }
  
  // 计算减去指定小时后的时间，负数的话加24（相当于前一天）
  let newHour24 = hour24 - subtractHours;
  if (newHour24 < 0) {
    newHour24 += 24;
  }
  
  // 转回到12小时制
  let newHour12;
  let newAmpm;
  if (newHour24 === 0 || newHour24 === 12) {
    newHour12 = 12;
  } else {
    newHour12 = newHour24 % 12;
  }
  // 0-11点是AM，12-23点是PM
  newAmpm = newHour24 < 12 ? "am" : "pm";
  
  // 确保分钟显示为两位数（比如5分钟变成05）
  const formattedMinute = minute.padStart(2, "0");
  
  // 把结果展示出来
  document.getElementById("result").innerHTML = `${newHour12}:${formattedMinute} ${newAmpm.toUpperCase()}`;
}
</script>

关键步骤说明 #

• 转换24小时制：处理了12AM（转0）和12PM（保持12）的特殊情况，避免计算出错
• 时间减法处理：如果减去小时后时间为负，自动加24，对应前一天的时间
• 转回12小时制：同样处理0点（转12AM）和12点的特殊情况，正确判断AM/PM
• 格式化分钟：用padStart方法让分钟始终显示两位数，视觉更统一

你可以直接把这段代码用起来，要是需要调整减去的小时数，修改subtractHours的值就行啦！

内容的提问来源于stack exchange，提问作者Rio Gonchar