如何在JavaScript中实现12小时制与24小时制（军用时间）双向切换

你的时钟双向切换功能失效，核心是这几个问题导致：

1. 定时器管理混乱：切换时没正确清理旧定时器，还反复创建新定时器，多个定时器同时运行导致时间显示互相覆盖。
2. 状态变量被篡改：isOppen在timeFor12/timeFor24里被强制赋值，打乱了按钮的状态判断逻辑。
3. 日期显示错误：用today.getDay()（获取星期索引）代替了today.getDate()（获取当月日期），且日期后缀统一用th不符合规范。
4. 切换逻辑颠倒：按钮分支里的定时器操作完全错误，比如想切24小时制却又启动12小时制定时器。

具体修复步骤 #

• 用一个全局变量管理当前定时器，切换前先清理旧定时器，避免冲突。
• 移除timeFor12/timeFor24里对状态变量的赋值，让状态只由按钮逻辑控制。
• 修正日期获取方法，添加日期后缀判断（1st/2nd/3rd等）。
• 合并时间更新逻辑为一个函数，根据状态自动切换格式，同时更新按钮文本。

修正后的完整代码 #

const headClock = document.createElement("h2");
const dateDay = document.createElement("h2");
const time = document.createElement("h1");
const changeTimeFormat = document.createElement("button");
const div = document.createElement("div");

div.style.cssText = "text-align: center";
headClock.innerHTML = "A Simple Digital Clock";

const weekday = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];
const month = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

// 状态变量：true=12小时制，false=24小时制
let is12HourFormat = true;
// 全局定时器变量，统一管理
let timerInterval;

// 统一更新时钟函数
function updateClock() {
  const options = {
    timeZone: "Asia/Riyadh",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    hour12: is12HourFormat
  };
  time.innerHTML = new Date().toLocaleString("ru-RU", options);
}

// 生成日期后缀（1st/2nd/3rd/4th...）
function getDateSuffix(day) {
  if (day > 3 && day < 21) return "th";
  switch (day % 10) {
    case 1: return "st";
    case 2: return "nd";
    case 3: return "rd";
    default: return "th";
  }
}

// 初始化日期显示
const today = new Date();
const day = today.getDate();
dateDay.innerHTML = `${weekday[today.getDay()]}, ${
  month[today.getMonth()]
} ${day}${getDateSuffix(day)} ${today.getFullYear()}`;

// 按钮点击逻辑
changeTimeFormat.onclick = () => {
  // 清理当前定时器
  clearInterval(timerInterval);
  // 切换状态
  is12HourFormat = !is12HourFormat;
  // 更新按钮文本
  changeTimeFormat.textContent = is12HourFormat 
    ? "Switch to Military Time Format" 
    : "Switch to Standard Time Format";
  // 重启定时器
  updateClock();
  timerInterval = setInterval(updateClock, 1000);
};

// 初始按钮文本
changeTimeFormat.textContent = "Switch to Military Time Format";

div.appendChild(headClock);
div.appendChild(time);
div.appendChild(dateDay);
div.appendChild(changeTimeFormat);
document.body.appendChild(div);

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