利用css+原生js制作简单的钟表

下面为您详细讲解“利用 CSS + 原生 JavaScript 制作简单的钟表”攻略。

准备工作

首先，我们需要准备以下工具：

1. 代码编辑器：Visual Studio Code、Sublime Text、Atom 等。
2. 网页浏览器：Chrome、Firefox、Safari 等。

制作步骤

接下来，我们按照以下步骤来制作简单的钟表：

1. HTML 结构

我们先来编写 HTML 结构，代码如下：

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

其中，.clock 是钟表的容器，.hour-hand、.minute-hand 和 .second-hand 分别是时、分和秒针，.center 是钟表中心点。

2. CSS 样式

接着，我们来为钟表编写样式，代码如下：

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

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

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

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

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

.center {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  z-index: 4;
}

3. JavaScript 动态效果

最后，我们来为时、分、秒针添加动态效果，代码如下：

function updateClock() {
  var now = new Date();
  var seconds = now.getSeconds();
  var minutes = now.getMinutes();
  var hours = now.getHours();
  var hour_deg = hours * 30 + minutes * 0.5;
  var minute_deg = minutes * 6 + seconds * 0.1;
  var second_deg = seconds * 6;

  document.querySelector(".hour-hand").style.transform = `rotate(${hour_deg}deg)`;
  document.querySelector(".minute-hand").style.transform = `rotate(${minute_deg}deg)`;
  document.querySelector(".second-hand").style.transform = `rotate(${second_deg}deg)`;
}

setInterval(updateClock, 1000);

在上述代码中，我们通过 setInterval 方法每秒钟调用 updateClock 函数，来实时更新时、分、秒针的角度，从而达到钟表动态效果呈现的目的。

示例说明

以下是两个通过 HTML、CSS 和 JavaScript 呈现钟表的示例：

示例一

https://codepen.io/lucien76/pen/XWpRMEy

在该示例中，作者采用了不同的 CSS 样式，通过 JavaScript 获取当前时间，将时、分、秒针的角度进行计算并赋值，最后为其添加了动态效果。

示例二

https://codepen.io/tutsplus/pen/XKzPWz

在该示例中，作者采用了 PNG 图形作为时、分、秒针，通过 JavaScript 动态计算并设置其旋转角度，实现了钟表的动态效果呈现。

总的来说，使用 HTML、CSS 和 JavaScript 制作简单的钟表比较容易，只需注意细节和动态效果的实现即可。