制作按钮以在 12 小时和 24 小时时间之间切换并保存到本地存储

Question

我的网站中有一个时钟，我想添加一个按钮或切换到可切换 12 小时和 24 小时时间的设置，反之亦然。 我的问题是我不知道在哪里连接clock.js中的setClockStyle

const displayTime = document.querySelector(".display-time");

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

  displayTime.innerText = time.toLocaleTimeString("en-US", {
    hour12: true,
    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();

和按钮

<div class="section-title">Clock Style</div>

<div class="buttons">
  <button class="button" onclick="setClockStyle('12')">12hr</button>
  <button class="button" onclick="setClockStyle('24')">24hr</button>
</div>
  

Answer 1

使用全局变量将标志保存 12 或 24 小时。然后在

showTime()

中使用它。

let hour12 = true;

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

  displayTime.innerText = time.toLocaleTimeString("en-US", {
    hour12: hour12,
    hour: '2-digit',
    minute: '2-digit'
  });

  setTimeout(showTime, 1000);
}

然后

setClockStyle()

可以简单地适当设置变量：

function setClockStyle(style) {
    hour12 = style == '12';
}