在页面上实现机械时钟显示

可以使用 HTML、CSS 和 JavaScript 来实现一个简单的机械时钟。

HTML 结构：

<div class="clock">
  <div class="hour-hand"></div>
  <div class="minute-hand"></div>
  <div class="second-hand"></div>
  <div class="center-circle"></div>
</div>

CSS 样式：

.clock {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f2f2f2;
}

.hour-hand,
.minute-hand,
.second-hand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 100%;
  background-color: black;
}

.hour-hand {
  width: 6px;
  height: 50px;
  margin-left: -3px;
  margin-top: -50px;
  z-index: 3;
}

.minute-hand {
  width: 4px;
  height: 80px;
  margin-left: -2px;
  margin-top: -80px;
  z-index: 2;
}

.second-hand {
  width: 2px;
  height: 100px;
  margin-left: -1px;
  margin-top: -100px;
  z-index: 1;
}

.center-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: black;
}

JavaScript 代码：

function updateClock() {
  const now = new Date();

  const hour = now.getHours();
  const minute = now.getMinutes();
  const second = now.getSeconds();

  const hourDegrees = (hour / 12) * 360 + (minute / 60) * 30 - 90;
  const minuteDegrees = (minute / 60) * 360 + (second / 60) * 6 - 90;
  const secondDegrees = (second / 60) * 360 - 90;

  const hourHand = document.querySelector('.hour-hand');
  const minuteHand = document.querySelector('.minute-hand');
  const secondHand = document.querySelector('.second-hand');

  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
  minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
  secondHand.style.transform = `rotate(${secondDegrees}deg)`;
}

setInterval(updateClock, 1000);

代码解释：

- HTML 结构中，我们创建了一个 `.clock` 容器，并在其中添加了时针、分针、秒针和中心圆点。
- CSS 样式中，我们设置了容器的样式和时针、分针、秒针和中心圆点的样式。时针的长度为 50px，分针的长度为 80px，秒针的长度为 100px。
- JavaScript 代码中，我们定义了一个 `updateClock` 函数，用于更新时钟的指针位置。我们获取当前时间的小时数、分钟数和秒数，然后计算出时针、分针和秒针的旋转角度。最后，我们使用 `querySelector` 方法获取时针、分针和秒针的 DOM 元素，并通过 `style.transform` 属性设置它们的旋转角度。我们使用 `setInterval` 方法每秒钟调用一次 `updateClock` 函数，从而实现机械时钟的动态显示效果。

完成以上步骤后，保存代码并在浏览器中打开 HTML 文件，就可以看到一个简单的机械时钟了。