用css和js实现一个时钟功能并注释

HTML部分：

<!-- 时钟容器 -->
<div class="clock-container">
  <!-- 时钟数字显示 -->
  <div class="clock-digits">
    <span id="hour"></span>
    <b>:</b>
    <span id="minute"></span>
    <b>:</b>
    <span id="second"></span>
  </div>
  <!-- 时钟指针 -->
  <div class="clock-hands">
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
  </div>
</div>

CSS部分：

/* 时钟容器样式 */
.clock-container {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  position: relative;
}

/* 时钟数字显示样式 */
.clock-digits {
  font-size: 24px;
  text-align: center;
  margin-top: 60px;
}

/* 时钟指针样式 */
.clock-hands {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

.hour-hand,
.minute-hand,
.second-hand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
}

.hour-hand {
  width: 8px;
  height: 60px;
  background-color: black;
  border-radius: 10px 10px 0 0;
}

.minute-hand {
  width: 6px;
  height: 80px;
  background-color: black;
  border-radius: 10px 10px 0 0;
}

.second-hand {
  width: 4px;
  height: 100px;
  background-color: red;
  border-radius: 10px 10px 0 0;
}

JavaScript部分：

// 获取时钟指针元素
const hourHand = document.querySelector(".hour-hand");
const minuteHand = document.querySelector(".minute-hand");
const secondHand = document.querySelector(".second-hand");

// 更新时间
function updateTime() {
  const date = new Date();

  // 获取时分秒
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  // 计算旋转角度
  const hourDegrees = (hours / 12) * 360 + 90;
  const minuteDegrees = (minutes / 60) * 360 + 90;
  const secondDegrees = (seconds / 60) * 360 + 90;

  // 更新指针样式
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
  minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
  secondHand.style.transform = `rotate(${secondDegrees}deg)`;

  // 更新时分秒数字
  document.getElementById("hour").textContent = hours >= 10 ? hours : `0${hours}`;
  document.getElementById("minute").textContent = minutes >= 10 ? minutes : `0${minutes}`;
  document.getElementById("second").textContent = seconds >= 10 ? seconds : `0${seconds}`;
}

// 每秒更新一次时间
setInterval(updateTime, 1000);