网站时钟添加12/24小时制切换按钮并关联setClockStyle及本地存储

解决方案步骤： #

1. 添加本地存储读取与状态变量
   在clock.js开头定义存储时钟格式的变量，优先读取localStorage中的设置，无设置则默认12小时制：

const displayTime = document.querySelector(".display-time");
// 读取本地存储的时钟格式，默认12小时制
let clockFormat = localStorage.getItem('clockFormat') || '12';

2. 修改showTime函数适配动态格式
   调整toLocaleTimeString的hour12参数，根据当前clockFormat自动切换：

function showTime() {
  let time = new Date();

  displayTime.innerText = time.toLocaleTimeString("en-US", {
    hour12: clockFormat === '12', // 动态切换小时制
    hour: '2-digit',
    minute: '2-digit'
  });

  setTimeout(showTime, 1000);
}

3. 实现setClockStyle函数
   在clock.js中添加该函数，负责更新格式、保存到localStorage：

function setClockStyle(format) {
  clockFormat = format;
  localStorage.setItem('clockFormat', format);
  // 可选：更新按钮激活状态（比如添加active类）
  document.querySelectorAll('.button').forEach(btn => {
    btn.classList.toggle('active', btn.textContent.includes(format));
  });
}

4. 初始化按钮状态（可选）
   页面加载后给当前格式对应的按钮添加激活样式，提升体验：

// 初始化按钮状态
document.querySelectorAll('.button').forEach(btn => {
  if (btn.textContent.includes(clockFormat)) {
    btn.classList.add('active');
  }
});

完整clock.js代码： #

const displayTime = document.querySelector(".display-time");
// 读取本地存储的时钟格式，默认12小时制
let clockFormat = localStorage.getItem('clockFormat') || '12';

function showTime() {
  let time = new Date();

  displayTime.innerText = time.toLocaleTimeString("en-US", {
    hour12: clockFormat === '12', // 动态切换小时制
    hour: '2-digit',
    minute: '2-digit'
  });

  setTimeout(showTime, 1000);
}

showTime();

function updateDate() {
  let today = new Date();
  let dayName = today.getDay(),
    dayNum = today.getDate();
  const IDCollection = ["daynum"];
  const val = [dayNum];

  for (let i = 0; i < IDCollection.length; i++) {
    document.getElementById(IDCollection[i]).firstChild.nodeValue = val[i];
  }
}

updateDate();

function setClockStyle(format) {
  clockFormat = format;
  localStorage.setItem('clockFormat', format);
  // 更新按钮激活状态
  document.querySelectorAll('.button').forEach(btn => {
    btn.classList.toggle('active', btn.textContent.includes(format));
  });
}

// 初始化按钮状态
document.querySelectorAll('.button').forEach(btn => {
  if (btn.textContent.includes(clockFormat)) {
    btn.classList.add('active');
  }
});

说明： #

• HTML部分无需修改，按钮的onclick事件已正确关联到setClockStyle函数
• 切换后设置会自动保存到localStorage，刷新页面后会保留用户选择的格式
• 可选的按钮激活样式需要你在CSS中定义.active类（比如改变背景色或文字颜色）

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