如何用JavaScript将倒计时的24小时制转为带AM/PM的12小时制

AI 小北

2026-5-28

实现带AM/PM的12小时制倒计时

没问题，我来帮你修改代码实现12小时制带AM/PM标识的格式。核心是把计算出来的24小时制小时数转换为12小时制，并添加时段标识，下面是修改后的完整代码：

<p id="check_time"></p>
<p id="check_hours"></p>
<script>
var countDownDate = new Date("may 17, 2018 01:37:25").getTime();
var x = setInterval(function() {
    var now = new Date().getTime();
    var distance = countDownDate - now;

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // 转换为12小时制并添加AM/PM标识
    var period = hours >= 12 ? "PM" : "AM";
    var twelveHour = hours % 12;
    twelveHour = twelveHour === 0 ? 12 : twelveHour; // 把0点转换为12点

    // 更新显示内容
    document.getElementById("check_hours").innerHTML = twelveHour + " " + period;
    document.getElementById("check_time").innerHTML = days + "d " + twelveHour + "h " + period + " " + minutes + "m " + seconds + "s ";

    if (distance < 0) {
        clearInterval(x);
        // 原代码里的"demo"元素不存在，这里改成check_time更合理
        document.getElementById("check_time").innerHTML = "EXPIRED";
    }
}, 1000);
</script>

关键修改点说明：

时段判断：用hours >= 12来区分PM和AM，大于等于12就是PM，否则是AM。
12小时制转换：用hours % 12得到12小时制的小时数，这里要注意0点（24小时制的0或12）需要转换为12，所以加了判断twelveHour === 0 ? 12 : twelveHour。
显示更新：把原来的hours替换成转换后的twelveHour，并加上period（AM/PM）标识，同时更新了check_hours和check_time的显示内容。
修复小问题：原代码里倒计时结束时要修改的demo元素不存在，我改成了check_time，你可以根据自己的需求调整。