如何用JavaScript实现按钮切换12小时制与24小时制时钟

原代码存在的问题 #

• 定义的clockSystemTime切换函数从未被调用，无法触发制式切换
• 没有持久化记录当前时钟制式的状态，每次刷新都会重置逻辑
• 12小时制的小时转换逻辑错误（如12点未保持原值、0点未转为12）
• 错误判断hour<0，getHours()返回值范围为0-23，不会出现负数
• 无论当前制式如何，始终显示AM/PM，不符合24小时制的显示规范

修正后的完整实现 #

HTML结构（补充按钮部分）

<div id="clock"></div>
<button id="toggle-btn">切换到24小时制</button>

JavaScript代码

// 记录当前时钟制式，默认启用12小时制
let is24Hour = false;
const toggleBtn = document.getElementById('toggle-btn');
const clockElement = document.getElementById('clock');

// 统一补零工具函数，减少重复逻辑
function padZero(num) {
    return num < 10 ? `0${num}` : num;
}

function displayTime() {
    const d = new Date();
    let hour = d.getHours();
    const minute = padZero(d.getMinutes());
    const second = padZero(d.getSeconds());
    let amOrPm = '';

    if (!is24Hour) {
        // 12小时制逻辑处理
        amOrPm = hour >= 12 ? 'PM' : 'AM';
        // 转换小时：0→12，13-23→1-11，12保持12
        hour = hour % 12 || 12;
    }
    const displayHour = padZero(hour);

    clockElement.innerHTML = `${displayHour}:${minute}:${second} ${amOrPm}`;
}

// 绑定按钮切换事件
toggleBtn.addEventListener('click', () => {
    is24Hour = !is24Hour;
    // 更新按钮文本，提示当前可切换的制式
    toggleBtn.textContent = is24Hour ? '切换到12小时制' : '切换到24小时制';
});

// 初始化立即显示时间，避免页面加载延迟
displayTime();
setInterval(displayTime, 1000);

关键修改说明 #

• 新增is24Hour全局变量持久化制式状态，避免每次刷新重置
• 封装padZero函数统一处理数字补零，简化重复代码
• 用hour % 12 || 12修正12小时制的小时转换逻辑，覆盖所有边界情况
• 按钮点击时切换制式状态，并同步更新按钮文本，提升用户体验
• 根据制式状态决定是否显示AM/PM，符合对应制式的显示规范
• 初始化时主动调用一次displayTime，避免页面加载后延迟1秒才显示时间

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