如何用JavaScript实现手表表盘时钟与圆周运动效果？

本文共计1292个文字，预计阅读时间需要6分钟。

苹果手表表盘时钟与JS圆周运动+实现结果+需求分析：

1.实现显示北京时间；

2.时针、分针、秒针按时间转动；

3.小球随秒针转动绕表盘滚动。

苹果手表表盘时钟与js圆周运动

实现结果

需求分析：

1、时钟时间按照北京时间进行显示;
2、时针、分针、秒针按照时钟运转标准进行运转；
3、小球跟随秒表围绕表盘进行圆周运动。

代码分析

1、html结构：时针、分针、秒针、小球分别用一个div，将他们一起放到一个大的div中；
2、css样式：表盘布局多使用相对定位与绝对定位，将表针与各时刻标刻移动到特定的位置；
3、js行为：为了实现动态获取时间，可以使用var now=new Date()，再利用定时器setInterval，实现每经过1s重新获取当前时间。