Day02 - JavaScript + CSS Clock
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:30天完成30个JS原生开发项目挑战视频教程。JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。
简介
第二天的练习是用JS+CSS模拟时钟效果。
效果如下:
实现以上模拟时钟的效果,大致思路和解决方案如下:
- 分别获取到当前时间的时、分、秒。
- 通过时分秒对一圈360度,进行映射,确定每一个指针所需旋转的角度。
- 通过CSS的
transform:rotate(deg)
,来实时的调整指针在键盘中的位置。
页面布局
1 | <div class="clock"> |
CSS样式
1 | <style> |
涉及到的特性:
transform-oragin
调整指针的初始位置以及旋转的轴点:transform-oragin
1 | transform-oragin: 100%; //初始化使三个指针全部指向12时 |
transform: rotate()
设置旋转角度
transition
1 | transition: all //0.05s;设置动画时间为0.05秒 |
transition-timing-function: cubic-bezier(x, x, x, x)
设置 transition-time-function
的值,以实现秒针“滴答滴答”的效果。此外注意 transform
中的 rotate
(旋转)属性由角度来控制,可以试着在页面上修改这个参数来查看效果。
JS代码
1 | <script> |
- 获取秒针、分钟、小时节点
1 | const secondHand = document.querySelector('.second-hand'); |
- 获取当前时间秒、分、小时
1 | const now = new Date(); |
- 计算秒、分、小时角度
1 | const secondsDegrees = ((seconds / 60) * 360) + 90; |
- 根据角度设置样式
1 | secondHand.style.transform = `rotate(${secondsDegrees}deg)`; |
- 设置定时器,每秒调用一次
setDate
函数
1 | setInterval(setDate, 1000); |
延伸思考
此处存在一个小瑕疵,当秒针旋转一圈之后回到初始位置,开始第二圈旋转,角度值的变化时 444° → 90° → 96° …. 这个过程中,指针会先逆时针从 444° 旋转至 90°,再继续我们期望的顺时针旋转,由于秒针变换时间只有 0.05s,所以呈现的效果就是秒针闪了一下,如果想要观察细节,可以将 .second
设为 transition: all 1s
,要解决这个问题,目前找到了两种解决办法:
- 第一种
1 | <script> |
- 第二种
1 | <script> |
既然引发问题的是角度的大小变化,那就可以对这个值进行处理。此前的代码中,每秒都会重新 new 一个 Date 对象,用来计算角度值,但如果让这个角度值一直保持增长,也就不会出现逆时针回旋的问题了。