使用 HTML、CSS 和 JavaScript 创建模拟时钟

在本文中，我们将介绍如何使用 HTML、CSS 和 JavaScript 创建模拟时钟。模拟时钟是一个很好的练手项目，可以帮助你加深 JavaScript 对 DOM 操作的理解。

HTML 代码

时钟一般由数字和指针组成。在 HTML 中，我们可以使用 <div> 元素来表示时钟的样式，并使用 CSS 来设置其样式。

<div class="clock">
  <div class="hour-hand"></div>
  <div class="minute-hand"></div>
  <div class="second-hand"></div>
  <div class="face">
    <div class="num num1">1</div>
    <div class="num num2">2</div>
    <div class="num num3">3</div>
    <div class="num num4">4</div>
    <div class="num num5">5</div>
    <div class="num num6">6</div>
    <div class="num num7">7</div>
    <div class="num num8">8</div>
    <div class="num num9">9</div>
    <div class="num num10">10</div>
    <div class="num num11">11</div>
    <div class="num num12">12</div>
  </div>
</div>

可以看到，时钟由四个子元素组成：

1. .hour-hand：表示小时指针。
2. .minute-hand：表示分钟指针。
3. .second-hand：表示秒钟指针。
4. .face：表示时钟的数字面板。

数字面板由 12 个子元素组成，每个子元素都代表一个数字。

CSS 代码

接下来我们需要为时钟设置样式。我们使用 CSS 来设置这些样式。

.clock {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f7f7f7;
  position: relative;
  margin: 50px auto;
}
  
.hour-hand {
  width: 4px;
  height: 50px;
  background-color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
  transform: translate(-50%, -100%);
}

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

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

.face {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  font-size: 20px;
}

.num {
  width: 20px;
  height: 20px;
  font-size: 14px;
  margin: 5px;
  border-radius: 50%;
  background-color: grey;
  text-align: center;
  line-height: 20px;
}

可以看到，我们将时钟包裹在一个圆形的 .clock 容器内。我们使用 border-radius 属性来设置容器为圆形。

同时，我们分别设置了 .hour-hand、.minute-hand 和 .second-hand 的样式。这些样式分别设定了它们的高度、宽度、颜色、定位、变换（transform）和变换的基点（transform-origin）。这些属性可以让我们将指针定位到正确的位置。

最后，我们为数字面板 .face 和数字 .num 设置了样式。我们使用 flexbox 布局来水平和垂直居中数字面板中的数字。这些数字使用了 border-radius 属性，从而产生了圆形的样式。

JavaScript 代码

最后，我们需要编写一些 JavaScript 代码，来让时钟运转起来。

function setTime() {
  const now = new Date();
  
  const hours = now.getHours() % 12;
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();
  
  const hourDegrees = ((hours / 12) * 360) + ((minutes / 60) * 30) + 90;
  const minuteDegrees = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 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)`;
}

setInterval(setTime, 1000);

我们定义了一个名为 setTime 的函数，该函数获取当前时间。然后，我们将当前时间转换为时针、分针和秒针的角度。

最后，我们使用 setInterval 函数，每秒钟调用一次 setTime 函数，并将时针、分针和秒针的角度设置为旋转变换（transform: rotate()）的值。

结论

现在我们已经创建了一个漂亮的模拟时钟，并使用了 HTML、CSS 和 JavaScript。通过这个项目，你可以加深对 DOM 操作、变换和定时器的理解。