点击12H按钮后时间仅短暂显示12小时制即复原，求解决方案

你遇到的核心问题是每秒执行的clock()函数会覆盖12小时制的显示——因为每次clock()运行时，都会重新计算24小时格式的小时数并更新DOM，所以点击12H按钮后的修改只会维持1秒，下一次函数执行就被重置了。

另外，你把点击事件绑定放在clock()内部，这会导致每秒都重复绑定事件，不仅没用还可能引发不必要的性能问题。

我们需要一个全局状态变量来记录当前的时间格式偏好，然后在clock()函数里根据这个状态来渲染对应的时间格式。同时把点击事件移到函数外部，只绑定一次。

修改后的完整代码如下：

<div class="main">
  <div class="clock">
    <span id="hour"></span>
    <span>:</span>
    <span id="minutes"></span>
    <span id="ampm"></span>
  </div>
  <div class="btn">
    <button id="twentyFourHourTime">24H</button>
    <button id="twelveHourTime">12H</button>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
// 全局状态变量：记录当前是否使用12小时制
let is12HourFormat = false;

function clock() {
  const date = new Date();
  let hour = date.getHours();
  let minutes = date.getMinutes();
  let ampm = '';

  // 补零处理
  if (minutes < 10) minutes = "0" + minutes;

  // 根据状态决定时间格式
  if (is12HourFormat) {
    // 转换为12小时制
    ampm = hour >= 12 ? 'PM' : 'AM';
    hour = hour % 12 || 12; // 处理0点为12点的情况
    hour = hour < 10 ? "0" + hour : hour; // 补零（可选，看需求）
  } else {
    // 24小时制补零
    hour = hour < 10 ? "0" + hour : hour;
    ampm = '';
  }

  // 更新DOM
  $("#hour").html(hour);
  $("#minutes").html(minutes);
  $("#ampm").html(ampm);
};

// 点击事件放在外部，只绑定一次
$(document).ready(function() {
  // 启动时钟
  setInterval(clock, 1000);
  
  // 切换到12小时制
  $("#twelveHourTime").on("click", function() {
    is12HourFormat = true;
    // 立即更新一次（避免等1秒才变化）
    clock();
  });

  // 切换到24小时制
  $("#twentyFourHourTime").on("click", function() {
    is12HourFormat = false;
    // 立即更新一次
    clock();
  });
});
</script>

• 新增全局状态变量is12HourFormat：用来保存用户选择的时间格式，不会被clock()的重复执行重置。
• 点击事件移到$(document).ready()内部：避免每秒重复绑定事件，只初始化一次。
• clock()内部根据状态渲染时间：每次执行时先判断当前应该用哪种格式，再计算对应的小时数和AM/PM标识。
• 点击按钮后立即调用clock()：不用等下一秒的定时器触发，提升用户体验。
• 优化12小时制的边界处理：比如0点会显示为12AM，12点显示为12PM，符合常规的12小时制逻辑。

这样修改后，点击12H按钮就会固定显示12小时制，直到你点击24H按钮切换回去啦！

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