用CSS和JS实现时钟效果_UTF_8

见贤思齐

这道题来自于Wes Bos[1]的JavaScript30[2]教程。JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。这道题使用CSS和JavaScript实现一个时钟，效果如下图所示：问题本身并不复杂，有很多思路可以实现，难点是如何尽量少的JS最简单地实现。有兴趣的同学可以挑战一下，在码上掘金上复制这个模板[3]开始你的挑战。好，如果你已经尝试过了挑战，可以看一下参考答案[4]，看看这个实现方法和你的思路是否一致。然后我们来看看，通过这个挑战，能学到什么知识。关键知识点HTML结构和基础CSSCSS 关键帧动画JS 控制 animation-delayHTML结构和基础CSS时钟的HTML结构比较简单：.clock是时钟主体，.clock-face是时钟面板，其中有三个指针，分别是时针、分针和秒针。外框是一个圆盘，我们通过border-radius:50%来绘制圆形边框，用box-shadow来给边框添加一些细节。.clock{width:30rem;height:30rem;border:20pxsolidwhite;border-radius:50%;margin:50pxauto;position:relative;padding:2rem;box-shadow:0004pxrgba(0,0,0,0.1),inset0003px#EFEFEF,inset0010pxblack,0010pxrgba(0,0,0,0.2);}内面板包括三个指针的定位，时钟中心有个小圆点，我们用.clock-face:after伪元素实现。.clock-face{position:relative;width:100%;height:100%;transform:translateY(-3px);/*accountfortheheightoftheclockhands*/}.clock-face:after{width:1em;height:1em;left:50%;top:50%;position:absolute;display:block;content:'';background-color:#a8c5d1;border-radius:50%;box-shadow:0002pxrgba(0,0,0,0.1),0010pxrgba(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:0000.1px#fff,0001pxrgb(000/10%),008pxrgb(000/50%),2px4px1pxrgb(000/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/7120417727843401764CSS 关键帧动画接下来我们给时钟定义CSS关键帧动画：@keyframescircle{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:circle60ssteps(60,end)infinite;}.min-hand{animation:circle3600slinearinfinite;}.hour-hand{animation:circle43200slinearinfinite;}秒针是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设置为负数的当前时间就可以了，具体代码如下：constsecondHand=document.querySelector('.second-hand');constminsHand=document.querySelector('.min-hand');consthourHand=document.querySelector('.hour-hand');functioninit(){constnow=newDate();constseconds=now.getSeconds();secondHand.style.animationDelay=`-${seconds}s`;constmins=now.getMinutes()*60+seconds;minsHand.style.animationDelay=`-${mins}s`;consthours=now.getHours()*3600+mins;hourHand.style.animationDelay=`-${hours}s`;}init();这样我们就可以在打开页面的时候把时钟设置为当前时间了，之后直接让CSS动画自己运转就可以，不需要JS来控制了。总结以上就是所有内容，最后我们再总结一下学到的知识点：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%;来将指针设置为尖头效果。CSS 关键帧动画 steps这个特殊的timing-function可以实现秒针运动的效果。JS 控制 animation-delay 可以设置 animation-delay 属性让动画延迟运行；animation-delay可以设置为负值；我们只要在访问页面的过程中，通过JavaScript获得当前的时间，然后将animation-delay设置为负数的当前时间，完成初始化，就可以依靠CSS动画自己运转。参考资料[1]https://github.com/wesbos: https://link.juejin.cntarget=https%3A%2F%2Fgithub.com%2Fwesbos[2]https://javascript30.com/: https://link.juejin.cntarget=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.cntarget=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2FCSS_Animations%2FUsing_CSS_animations