JavaScript制作一个12小时的时钟

在JavaScript中创建一个显示12小时制的简单时钟，你可以利用HTML、CSS以及JavaScript结合。以下是一个基本示例：

1. HTML部分：

<div id="clock">
  <span class="hour"></span>:<span class="minute"></span>
</div>

2. CSS部分（用于美化样式）：

#clock {
  font-size: 48px;
  display: inline-block;
}
.hour, .minute {
  margin-right: 5px;
}

3. JavaScript部分：

function updateClock() {
  let date = new Date();
  let hours = date.getHours() % 12 || 12; // 取模运算避免0小时的情况
  let minutes = date.getMinutes();
  
  // 格式化并转换为字符串
  let formattedHours = hours < 10 ? "0" + hours : hours;
  let formattedMinutes = minutes < 10 ? "0" + minutes : minutes;
  
  document.getElementById("hour").innerText = formattedHours;
  document.getElementById("minute").innerText = formattedMinutes;
}

// 每秒更新一次
setInterval(updateClock, 1000);

在这个例子中，`updateClock`函数每秒会被调用一次，获取当前的小时和分钟，然后将其格式化为两位数（如果不足两位，在前面补零），最后将结果显示在HTML元素中。