JavaScript中24小时转12小时制：避免取模致AM/PM错误的方法

我一眼就看出问题出在哪了——你先对小时做了取模运算，之后判断AM/PM的逻辑直接失效了！

错误根源分析 #

你当前的代码里，先执行了h = h % 12：

• 当原始小时是12_{23（属于PM时段），取模后会变成0}11
• 这时候再判断if (h >= 12)永远为false，所以suffix一直被设为AM，自然就把PM时间错误标成了AM

修正方案：先判断AM/PM，再处理小时转换 #

正确的顺序应该是：先用原始的小时值判断AM/PM，再对小时进行12小时制的转换。这样既能保证时段标识正确，又能得到正确的12小时制小时数。

修正后的JavaScript代码如下：

var now = new Date()
var originalHours = now.getHours(); // 保留原始小时值用于判断AM/PM
var h = originalHours % 12;
var m = now.getMinutes();
var s = now.getSeconds();

// 先判断AM/PM
var suffix = "AM";
if (originalHours >= 12) {
 suffix = "PM";
}

// 处理午夜（0点）和中午（12点）的特殊情况
if (h === 0) {
 h = 12;
}

// 更新DOM元素
document.getElementById("hours").innerHTML = h;
document.getElementById("minutes").innerHTML = m;
document.getElementById("seconds").innerHTML = s;
document.getElementById("ampm").innerHTML = suffix;

代码说明 #

• 新增originalHours变量存储原始的24小时制小时数，用来判断AM/PM，避免修改后的值影响逻辑
• 取模运算放在判断AM/PM之后，不影响时段判断
• 保留了对h === 0的处理，确保0点显示为12 AM，12点显示为12 PM

你的HTML部分完全没问题，不需要修改：

<body>
 <main>
 <h1>Digital clock</h1>
 <fieldset>
 <legend>Clock</legend>
 <span id="hours"> </span>:
 <span id="minutes"> </span>:
 <span id="seconds"> </span>
 <span id="ampm"> </span>
 </fieldset>
 </main>
</body>

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