用 CSS 和 JS 实现时钟效果 - 哈喽比特

379次阅读 | 发布于2年以前

这道题来自于Wes Bos[1]的JavaScript30[2]教程。

JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。

这道题使用CSS和JavaScript实现一个时钟，效果如下图所示：

问题本身并不复杂，有很多思路可以实现，难点是如何尽量少的JS最简单地实现。有兴趣的同学可以挑战一下，在码上掘金上复制这个模板[3] 开始你的挑战。

好，如果你已经尝试过了挑战，可以看一下参考答案[4]，看看这个实现方法和你的思路是否一致。然后我们来看看，通过这个挑战，能学到什么知识。

关键知识点

HTML结构和基础CSS
CSS 关键帧动画
JS 控制 animation-delay

HTML结构和基础CSS

时钟的HTML结构比较简单：

<div class="clock">
  <div class="clock-face">
    <div class="hand hour-hand"></div>
    <div class="hand min-hand"></div>
    <div class="hand second-hand"></div>
  </div>
</div>

.clock是时钟主体，.clock-face是时钟面板，其中有三个指针，分别是时针、分针和秒针。外框是一个圆盘，我们通过border-radius:50%来绘制圆形边框，用box-shadow来给边框添加一些细节。

.clock {
  width: 30rem;
  height: 30rem;
  border: 20px solid white;
  border-radius: 50%;
  margin: 50px auto;
  position: relative;
  padding: 2rem;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.1),
    inset 0 0 0 3px #EFEFEF,
    inset 0 0 10px black,
    0 0 10px rgba(0,0,0,0.2);
}

内面板包括三个指针的定位，时钟中心有个小圆点，我们用.clock-face:after伪元素实现。

.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(-3px); /* account for the height of the clock hands */
}

.clock-face:after {
  width: 1em;
  height: 1em;
  left: 50%;
  top: 50%;
  position: absolute;
  display: block;
  content: '';
  background-color: #a8c5d1;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.1),
    0 0 10px rgba(0,0,0,0.2);
  transform: translate(-50%, -50%);
}

注意到这里我们的把伪元素定位在时钟的中心，通过position:absolute，然后top和left定位到50%，再设置transform: translate(-50%, -50%)，这是一种常用的垂直水平居中的技巧。接着是三个指针的样式：

.hand {
  width: 50%;
  height: 6px;
  background: black;
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  box-shadow: 0 0 0 0.1px #fff, 
    0 0 0 1px rgb(0 0 0 / 10%), 
    0 0 8px rgb(0 0 0 / 50%), 
    2px 4px 1px rgb(0 0 0 / 50%);
}

.second-hand {
  height: 3px;
  background-color: #ff0e0e;
  border-bottom-left-radius: 100%;
  border-top-left-radius: 100%;
}

.min-hand {
  background-color: white;
  width: 45%;
  left: 5%;
}

.hour-hand {
  background-color: white;
  border-radius: 5px;
  width: 40%;
  height: 12px;
  left: 10%;
}

这里我们注意一个细节，秒针的样式里面我们用border-bottom-left-radius: 100%; border-top-left-radius: 100%;来将指针设置为尖头效果，原理如下：https://code.juejin.cn/pen/7120417727843401764

CSS 关键帧动画

接下来我们给时钟定义CSS关键帧动画：

@keyframes circle {
  to {transform: rotate(1.25turn);}
}

这个keyframes动画很简单，控制元素旋转到1.25周。为什么是1.25turn呢，还记得前面我们指针的CSS里有translate:transform(90deg)，因为指针的初始值是在12点钟的位置，所以转过了90度，对应也就是0.25turn，所以要再转一周的话，就是0.25+1=1.25turn。接下来我们将动画赋给指针：

.second-hand {
  animation: circle 60s steps(60, end) infinite;
}

.min-hand {
  animation: circle 3600s linear infinite;
}

.hour-hand {
  animation: circle 43200s linear infinite;
}

秒针是60秒一周，分针是3600秒一周，时针是43200秒一周；秒针是一格一格运动，可以用steps这个特殊的timing-function来实现。要了解CSS动画更详细的使用方法，可以详细阅读MDN文档[5]到此为止，我们已经实现了时钟几乎所有的功能，但是这个时钟是从12点0分0秒开始运行的，如何能让它同步到实际的时间呢？

JS 控制 animation-delay

我们可以设置 animation-delay 属性让动画延迟运行，而有趣的是，animation-delay是可以设置为负值的，那样它将让动画提前运行。比如我们把 animation-delay 设置为 -1800s，那么时钟就会提前半小时运行，那也就意味着当你打开浏览器的时候，看到的就是12点30分0秒的状态了。这样问题就简单了，我们只要在访问页面的过程中，通过JavaScript获得当前的时间，然后将animation-delay设置为负数的当前时间就可以了，具体代码如下：

const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');

function init() {
  const now = new Date();
  const seconds = now.getSeconds();
  secondHand.style.animationDelay = `-${seconds}s`;
  const mins = now.getMinutes() * 60 + seconds;
  minsHand.style.animationDelay = `-${mins}s`;
  const hours = now.getHours() * 3600 + mins;
  hourHand.style.animationDelay = `-${hours}s`;
}

init();

这样我们就可以在打开页面的时候把时钟设置为当前时间了，之后直接让CSS动画自己运转就可以，不需要JS来控制了。

总结

以上就是所有内容，最后我们再总结一下学到的知识点：

1 . HTML结构和基础CSS

通过border-radius:50%来绘制圆形边框，用box-shadow来给边框添加一些细节；通过position:absolute，然后top和left定位到50%，再设置transform: translate(-50%, -50%)来定位居中；用border-bottom-left-radius: 100%; border-top-left-radius: 100%;来将指针设置为尖头效果。

2 . CSS 关键帧动画

steps这个特殊的timing-function可以实现秒针运动的效果。

3 . JS 控制 animation-delay

可以设置 animation-delay 属性让动画延迟运行；animation-delay可以设置为负值；我们只要在访问页面的过程中，通过JavaScript获得当前的时间，然后将animation-delay设置为负数的当前时间，完成初始化，就可以依靠CSS动画自己运转。

参考资料

[1]https://github.com/wesbos: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fwesbos

[2]https://javascript30.com/: https://link.juejin.cn?target=https%3A%2F%2Fjavascript30.com%2F

[3]https://code.juejin.cn/pen/./7114180236664635429: https://code.juejin.cn/pen/./7114180236664635429

[4]https://code.juejin.cn/pen/./7111511848200962062: https://code.juejin.cn/pen/./7111511848200962062

[5]https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations: https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2FCSS_Animations%2FUsing_CSS_animations