苹果手表表盘时钟与js圆周运动
实现结果
需求分析：
1、时钟时间按照北京时间进行显示;
2、时针、分针、秒针按照时钟运转标准进行运转；
3、小球跟随秒表围绕表盘进行圆周运动。
代码分析
1、html结构：时针、分针、秒针、小球分别用一个div，将他们一起放到一个大的div中；
2、css样式：表盘布局多使用相对定位与绝对定位，将表针与各时刻标刻移动到特定的位置；
3、js行为：为了实现动态获取时间，可以使用var now=new Date()，再利用定时器setInterval，实现每经过1s重新获取当前时间。
核心函数
时钟运动
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function getTimeDeg(){ //获取当前时间，计算在时钟上，时、分、秒对应转动角度 var now=new Date(); var s=now.getSeconds(); var sDeg=s/60*360; var m=now.getMinutes(); var mDeg=(m*60+s)/3600*360; var h=now.getHours(); var hDeg=(h*3600+m*60+s)/(3600*12)*360; divH.style.transform=`rotate(${hDeg}deg)`; divM.style.transform=`rotate(${mDeg}deg)`; divS.style.transform=`rotate(${sDeg}deg)`; } |
圆周运动
|
1
2
3
4
5
6
7
8
9
10
11
|
function circleMotion(){ var now=new Date(); var sball=now.getSeconds(); var saDeg=sball/60*360-90; var r = 250; var radian = saDeg*Math.PI/180; var top = Math.cos(radian)*r; var left = Math.sin(radian)*r; ball.style.left= top+'px'; ball.style.top = left+'px'; } |
完整源代码（复制可用）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表盘时钟</title> <style> #circle{ width: 500px;height: 500px;border-radius: 255px; position: relative;top: 50px;left: 500px; background: radial-gradient(black,grey); border:#f7f7f7 10px solid; box-shadow: 0px 0px 0px 2px #a3a4a6,0px 0px 0px 32px #dedfe1; } #ball{ width: 30px;height: 30px;border-radius: 15px; background-color: red;position: absolute; margin-top: 235px;margin-left: 235px; z-index: 6; } #dian{ width: 40px;height: 40px;border-radius: 20px; background-color:white;position: absolute; margin-top: 230px; margin-left: 230px; box-shadow:0px -15px 10px -7px #867c7c inset,0px 0px 2px 0px black ; z-index: 6; } #h{ width:8px;height: 100px;background-color: white; position: absolute;border-radius: 8px;left: 246px;top: 150px; box-shadow:0px 0px 2px 1px #867c7c inset,0px 0px 1px 0px black ; z-index: 3; } #m{ width:6px;height: 150px;background-color: white; position: absolute;top: 100px;left: 247px;border-radius: 6px; box-shadow:0px 0px 1px 0px #867c7c inset,0px 0px 1px 0px black ; z-index: 4; } #s{ width:2px;height: 180px;background-color: red; position: absolute;top: 70px;left: 249px;border-radius: 2px; z-index: 5; } #s,#m,#h{ transform-origin: center bottom; } .tip{ width: 6px;height: 26px;border-radius: 3px;background-color: white; position: absolute;box-shadow:0px 0px 2px 1px #867c7c inset,0px 0px 1px 0px black ; } #time1{ top: 34px;left: 372px;transform-origin:top center ;transform: rotate(30deg); } #time2{ top: 125px;left: 463px;transform-origin:top center ;transform: rotate(60deg); } #time3{ top: 230px;left: 475px;transform: rotate(90deg); width: 10px;height: 40px;border-radius: 5px; } #time4{ top: 349px;left: 460px;transform-origin:bottom center ;transform: rotate(-60deg); } #time5{ top: 440px;left: 369px;transform-origin:bottom center ;transform: rotate(-30deg); } #time6{ top: 460px;left: 245px;width: 10px;height: 40px;border-radius: 5px; } #time7{ top: 440px;left: 122px;transform-origin:bottom center ;transform: rotate(30deg); } #time8{ top: 349px;left: 31px;transform-origin:bottom center ;transform: rotate(60deg); } #time9{ top: 230px;left: 15px;transform: rotate(90deg); width: 10px;height: 40px;border-radius: 5px; } #time10{ top: 124px;left: 30px;transform-origin:top center ;transform: rotate(-60deg); } #time11{ top: 33px;left: 121px;transform-origin:top center ;transform: rotate(-30deg); } #time12{ top: 0px;left: 245px; width: 10px;height: 40px;border-radius: 5px; } </style></head><body> <div id="circle"> <div id="h"></div> <div id="m"></div> <div id="s"></div> <div id="ball" class="tip"></div> <div id="dian" class="tip"></div> <div id="time1" class="tip"></div> <div id="time2" class="tip"></div> <div id="time3" class="tip"></div> <div id="time4" class="tip"></div> <div id="time5" class="tip"></div> <div id="time6" class="tip"></div> <div id="time7" class="tip"></div> <div id="time8" class="tip"></div> <div id="time9" class="tip"></div> <div id="time10" class="tip"></div> <div id="time11" class="tip"></div> <div id="time12" class="tip"></div> </div> <script> //获取div节点 var ball=document.getElementById("ball") var divS=document.getElementById("s"); var divM=document.getElementById("m"); var divH=document.getElementById("h"); //调用函数，可删除，删除后需等待1s才能看到运转 getTimeDeg(); //设置间隔时间为1s的定时器，每1s运行一次函数 setInterval(getTimeDeg,1000); //时间获取函数 circleMotion(); setInterval(circleMotion,1000); //时钟运动 function getTimeDeg(){ //获取当前时间，计算在时钟上，时、分、秒对应转动角度 var now=new Date(); var s=now.getSeconds(); var sDeg=s/60*360; var m=now.getMinutes(); var mDeg=(m*60+s)/3600*360; var h=now.getHours(); var hDeg=(h*3600+m*60+s)/(3600*12)*360; divH.style.transform=`rotate(${hDeg}deg)`; divM.style.transform=`rotate(${mDeg}deg)`; divS.style.transform=`rotate(${sDeg}deg)`; } //圆周运动 function circleMotion(){ var now=new Date(); var sball=now.getSeconds(); var saDeg=sball/60*360-90; var r = 250; var radian = saDeg*Math.PI/180; var top = Math.cos(radian)*r; var left = Math.sin(radian)*r; ball.style.left= top+'px'; ball.style.top = left+'px'; } </script></body></html> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/horizon12/article/details/108637556
