使用 HTML、CSS 和 Vanilla JavaScript 的响应式模拟时钟

这是一个使用 HTML、CSS 和 Vanilla JavaScript 编写的响应式模拟时钟。通过学习该时钟的实现过程，您将了解到如何使用 HTML、CSS 和 JavaScript 完成一个简单的互动应用程序。

用户界面

该时钟具有简洁的用户界面，它包含一个表盘和三个指针，分别表示小时、分钟和秒钟。用户可以通过修改时间来模拟不同的时间状态。同时，该时钟也是响应式的，可以适应不同设备的屏幕大小。

HTML

在 HTML 中，我们需要创建一个 div 元素作为时钟容器，并在其中插入用于显示时间的元素。

<div class="clock">
  <div class="hour-hand"></div>
  <div class="minute-hand"></div>
  <div class="second-hand"></div>
  <div class="time-display"></div>
</div>

CSS

在 CSS 中，我们需要定义时钟的基本样式，包括表盘和指针的样式。具体来说，我们需要设置表盘的大小、边框和颜色，以及指针的形状、旋转角度和颜色。

.clock {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  border-radius: 50%;
  border: 1px solid black;
}

.hour-hand,
.minute-hand,
.second-hand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 4px;
  height: 50%;
  background-color: black;
  transform-origin: bottom center;
}

.hour-hand {
  height: 35%;
  transform-origin: bottom center;
}

.minute-hand {
  height: 45%;
  transform-origin: bottom center;
}

.second-hand {
  height: 50%;
  background-color: red;
  transform-origin: bottom center;
}

.time-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: bold;
}

JavaScript

在 JavaScript 中，我们需要定义一个函数来更新指针的旋转角度，并在每秒钟调用该函数一次。

function updateClock() {
  const currentTime = new Date();
  const hours = currentTime.getHours();
  const minutes = currentTime.getMinutes();
  const seconds = currentTime.getSeconds();

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

  const hourHandRotation = (hours * 30) + (minutes / 2);
  const minuteHandRotation = (minutes * 6) + (seconds / 10);
  const secondHandRotation = seconds * 6;

  hourHand.style.transform = `rotate(${hourHandRotation}deg)`;
  minuteHand.style.transform = `rotate(${minuteHandRotation}deg)`;
  secondHand.style.transform = `rotate(${secondHandRotation}deg)`;
  timeDisplay.textContent = `${hours}:${minutes}:${seconds}`;
}

setInterval(updateClock, 1000);

结论

通过学习这个简单的例子，您已经了解到如何使用 HTML、CSS 和 Vanilla JavaScript 创建一个响应式模拟时钟，并对其进行交互式的操作。