Day02 - JavaScript + CSS Clock
作者：©
简介： 是 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 2 篇。完整指南在 。
简介
第二天的练习是用JS+CSS模拟时钟效果。
效果如下：
实现以上模拟时钟的效果，大致思路和解决方案如下：
分别获取到当前时间的时、分、秒。
通过时分秒对一圈360度，进行映射，确定每一个指针所需旋转的角度。
通过CSS的
transform：rotate(deg)，来实时的调整指针在键盘中的位置。
页面布局
CSS样式
涉及到的特性：
transform-oragin
调整指针的初始位置以及旋转的轴点:
transform-oragin: 100%; //初始化使三个指针全部指向12时
transform: rotate()
设置旋转角度
transition
transition: all //0.05s;设置动画时间为0.05秒
transition-timing-function: cubic-bezier(x, x, x, x)
设置 transition-time-function 的值，以实现秒针“滴答滴答”的效果。此外注意 transform 中的 rotate （旋转）属性由角度来控制，可以试着在页面上修改这个参数来查看效果。
JS代码
获取秒针、分钟、小时节点
const secondHand = document.querySelector('.second-hand'); const minsHand = document.querySelector('.min-hand'); const hourHand = document.querySelector('.hour-hand'); 获取当前时间秒、分、小时
const now = new Date();const seconds = now.getSeconds();const mins = now.getMinutes();const hour = now.getHours();
计算秒、分、小时角度
const secondsDegrees = ((seconds / 60) * 360) + 90;const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;
根据角度设置样式
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;minsHand.style.transform = `rotate(${minsDegrees}deg)`;hourHand.style.transform = `rotate(${hourDegrees}deg)`; 设置定时器，每秒调用一次
setDate函数
setInterval(setDate, 1000);
延伸思考
此处存在一个小瑕疵，当秒针旋转一圈之后回到初始位置，开始第二圈旋转，角度值的变化时 444° → 90° → 96° .... 这个过程中，指针会先逆时针从 444° 旋转至 90°，再继续我们期望的顺时针旋转，由于秒针变换时间只有 0.05s，所以呈现的效果就是秒针闪了一下，如果想要观察细节，可以将 .second 设为 transition: all 1s，效果如下所示：
要解决这个问题，目前找到了两种解决办法：
第一种
第二种
既然引发问题的是角度的大小变化，那就可以对这个值进行处理。此前的代码中，每秒都会重新 new 一个 Date 对象，用来计算角度值，但如果让这个角度值一直保持增长，也就不会出现逆时针回旋的问题了。
源码下载
社群品牌：
定位：寻找共好，共同学习，持续输出全栈技术社群业界荣誉：IT界的逻辑思维文化：输出是最好的学习方式官方公众号：全栈部落社群发起人：技术交流社区：全栈部落完整系列教程：
| 关注全栈部落官方公众号，每晚十点接收系列原创技术推送 |
|---|
 |