如何制作 CSS 时钟 - Javascript

制作一个 CSS 时钟是一个很酷的练习，可以帮助你熟悉 CSS 和 JavaScript。在这个教程中，我们将教您如何制作一个简单的 CSS 时钟。

步骤1：HTML

我们先要创建一个包含时钟的 HTML 元素。以下是一个基本的HTML结构：

<div class="clock">
  <div class="hour">
    <div class="hr"></div>
  </div>
  <div class="min">
    <div class="mn"></div>
  </div>
  <div class="sec">
    <div class="sc"></div>
  </div>
</div>

步骤2：CSS

接下来，我们要用 CSS 来设计时钟的外观。以下是我们完成的 CSS：

.clock {
  width: 300px;
  height: 300px;
  background-color: #f5f5f5;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hour,
.min,
.sec {
  width: 6px;
  height: 6px;
  background-color: #000;
  position: absolute;
  border-radius: 50%;
}

.hr {
  width: 60px;
  height: 6px;
  background-color: #000;
  transform-origin: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

.sc {
  width: 100px;
  height: 2px;
  background-color: #000;
  transform-origin: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

步骤3：JavaScript

最后，我们要用 JavaScript 来使时钟运行起来。以下是我们的 JavaScript 代码：

function setTime() {
  let time = new Date();
  let hr = time.getHours();
  let mn = time.getMinutes();
  let sc = time.getSeconds();

  let hrPosition = hr * 30 + mn / 2;
  let mnPosition = mn * 6;
  let scPosition = sc * 6;

  document.querySelector(".hour").style.transform =
    "rotate(" + hrPosition + "deg)";
  document.querySelector(".min").style.transform =
    "rotate(" + mnPosition + "deg)";
  document.querySelector(".sec").style.transform =
    "rotate(" + scPosition + "deg)";
}

setInterval(setTime, 1000);

以上代码使用了 JavaScript 的 Date 函数获取当前时间，并根据时间将时针、分针和秒针旋转到相应的位置上。

总结

通过以上三个步骤，我们成功地制作了一个简单的 CSS 时钟！你可以自己尝试对它做出更多改进和扩展。