实现效果

一个转动的表盘

技术分析

• 时间（new Date() 获取当前时间）

• 指针位置（js计算指针的角度）

• 指针旋转（每过一秒计算一次角度）

• 改变角度（transfrom: rotate()）

实现步骤

1. 获取当前时间

◼ 先获取对应的元素（三支指针）

◼ 获取当前时间的时分秒

2. 计算指针对应角度

◼ 指针的计算有多种思路，下面给出两种计算方式

1. 根据表盘有360度，秒针转一圈需要1分钟（60s），分针转一圈需要1小时 (60min)，时针转一圈需要12小时(12h)，我们可以分别计算指针在表盘上的占比然后乘以360

        ◻ 秒针 (seconds / 60)*360

        ◻ 分针 (mins / 60)*360 + (seconds / 60 / 60)*360

        ◻ 时针 (hour / 12)*360 + (mins / 60 / 12)*360 + (seconds / 60 / 60 / 12)*360

2. 根据每秒、每分、每时旋转的度数来计算在表盘上的位置，该方法计算了毫秒显示会更精准一点

        ◻ 一秒钟--->6度

        ◻ 一分钟--->6度

        ◻ 一小时--->30度

3. 改变表盘样式

◼ 修改对应指针的旋转角度，这里用 rotate 来修改，但此时显示效果不尽人意，我们还需要修改旋转起始点的位置

◼ 将 transfrom-origin 改为 right 就可以正常显示了

4. 实现转动效果

◼ 这里我们可以使用定时器来实现转动效果，之前的代码封装放入定时器，然后将将定时器设置为1秒就可以实现我们想要的效果了，由于开始的时候指针都是负90度，所以我们再在所有的角度上加上90

完整代码

外观美化

◼ 你可能觉得原有的项目样式不好看，你也可以自己修改成你喜欢的样式，这里我给出我自己的修改样式

    ◻ 修改指针的长短

    ◻ 改变指针颜色、增加阴影

    ◻ 修改背景图片、添加过渡动画等...

背景模糊

◼ 背景元素除了使用 filter: blur() + 伪元素 ，还可以使用backdrop-filter