分享一个html编写的圆形时钟模版
1 DOCTYPE html>
2
3 <html lang="en">
4
5 <head>
6
7 <meta charset="GBK">
8
9 <title>title>
10
11 <style>
12
13 html{
14
15 background: #000;
16
17 color: #666;
18
19 font-size: 12px;
20
21 overflow:hidden;
22
23 }
24
25 *{
26
27 margin: 0;
28
29 padding: 0;
30
31 }
32
33 span{
34
35 display: block;
36
37 float: left;
38
39 }
40
41 .on{
42
43 color: #fff;
44
45 }
46
47 .wrapper{
48
49 width: 200px;
50
51 height: 200px;
52
53 position: absolute;
54
55 left:50%;
56
57 top:50%;
58
59 margin-top: -100px;
60
61 margin-left: -100px;
62
63 }
64
65 .wrapper .timebox{
66
67 position: absolute;
68
69 width: 200px;
70
71 height: 200px;
72
73 top: 0;
74
75 left:0;
76
77 border-radius: 100%;
78
79 transition: all 0.5s;
80
81 }
82
83 .timebox span{
84
85 transition: all 0.5s;
86
87 float: left;
88
89 }
90
91 .wrapper .timebox span{
92
93 position: absolute;
94
95 left:50%;
96
97 top:50%;
98
99 width: 40px;
100
101 height: 18px;
102
103 margin-top: -9px;
104
105 margin-left: -20px;
106
107 text-align: right;
108
109 }
110
111 style>
112
113 head>
114
115 <body>
116
117 <div id="wrapper">
118
119 <div class="timebox yuebox" id="yueBox">div>
120
121 <div class="timebox riqiBox" id="riqiBox">div>
122
123 <div class="timebox hourbox" id="hourbox">div>
124
125 <div class="timebox minutebox" id="minutebox">div>
126
127 <div class="timebox secondbox" id="secondbox">div>
128
129 div>
130
131
132
133 <script>
134
135 let wrapper = document.getElementById("wrapper");
136
137 let yueBox = document.getElementById("yueBox");
138
139 let riqiBox = document.getElementById("riqiBox");
140
141 let hourbox = document.getElementById("hourbox");
142
143 let minutebox = document.getElementById("minutebox");
144
145 let secondbox = document.getElementById("secondbox");
146
147 /*
148
149 * 找所有的东西标签函数
150
151 * */
152
153 let findSiblings = function( tag ){
154
155 let parent = tag.parentNode;
156
157 let childs = parent.children;
158
159 let sb = [];
160
161 for(let i=0 ; i <= childs.length-1 ; i++){
162
163 if( childs[i]!==tag){
164
165 sb[sb.length] = childs[i];
166
167 }
168
169 }
170
171 return sb ;
172
173 };
174
175 /*
176
177 * 去掉所有兄弟的类
178
179 * */
180
181 let removeSiblingClass =function( tag ){
182
183 let sb = findSiblings( tag );
184
185 for(let i=0 ; i <= sb.length-1 ; i++){
186
187 sb[i].className = "";
188
189 }
190
191 };
192
193 /*
194
195 * 初始化月份函数
196
197 * */
198
199 let initMonth = function(){
200
201 for(let i=1; i<=12; i++){
202
203 let span = document.createElement("span");
204
205 span.innerHTML = i+"月";
206
207 yueBox.appendChild( span );
208
209 }
210
211 };
212
213 // 初始化日期
214
215 let initDate = function(){
216
217 for(let i=1; i<=31; i++){
218
219 let span = document.createElement("span");
220
221 span.innerHTML = i+"日";
222
223 riqiBox.appendChild( span );
224
225 }
226
227 };
228
229 // 初始化小时，分钟，秒
230
231 let initHour = function(){
232
233 for(let i=0; i<=23; i++){
234
235 let h = i ;
236
237 let span = document.createElement("span");
238
239 if( h<10){
240
241 h="0"+h;
242
243 }
244
245 span.innerHTML = h +"点";
246
247 hourbox.appendChild( span );
248
249 }
250
251 };
252
253 let initMinute = function(){
254
255 for(let i=0; i<=59; i++){
256
257 let f = i ;
258
259 let span = document.createElement("span");
260
261 if( f<10){
262
263 f="0"+f;
264
265 }
266
267 span.innerHTML = f +"分";
268
269 minutebox.appendChild( span );
270
271 }
272
273 };
274
275 let initSecond = function(){
276
277 for(let i=0; i<=59; i++){
278
279 let miao = i ;
280
281 let span = document.createElement("span");
282
283 if( miao<10){
284
285 miao="0"+miao;
286
287 }
288
289 span.innerHTML = miao +"秒";
290
291 secondbox.appendChild( span );
292
293 }
294
295 };
296
297 // 时间文字样式切换函数
298
299 let changeTime = function(tag){
300
301 tag.className = "on";
302
303 removeSiblingClass( tag );
304
305 };
306
307 /*
308
309 * 初始化日历函数
310
311 * */
312
313 let initRili = function(){
314
315 initMonth(); // 初始化月份
316
317 initDate(); // 初始化日期
318
319 initHour(); // 小时
320
321 initMinute();
322
323 initSecond();
324
325 };
326
327 /*
328
329 * 展示当前时间
330
331 * 参数：mydate 时间对象
332
333 * */
334
335 let showNow = function( mydate ){
336
337 let yue = mydate.getMonth() ;
338
339 let riqi = mydate.getDate();
340
341 let hour = mydate.getHours() ;
342
343 let minute = mydate.getMinutes();
344
345 let second = mydate.getSeconds();
346
347 // 时间文字样式切换函数
348
349 changeTime( yueBox.children[yue] );
350
351 changeTime( riqiBox.children[riqi-1] );
352
353 changeTime( hourbox.children[hour] );
354
355 changeTime( minutebox.children[minute] );
356
357 changeTime( secondbox.children[second] );
358
359 };
360
361 // 展示时间圆圈函数
362
363 // tag：目标
364
365 // num：数字数量
366
367 // dis：圆圈半径
368
369 let textRound = function(tag,num,dis){
370
371 let span = tag.children ;
372
373 for(let i=0 ; i<=span.length-1; i++){
374
375 span[i].style.transform="rotate("+ (360/span.length)*i+"deg) translateX("+dis+"px)" ;
376
377 }
378
379 };
380
381 /*
382
383 * 旋转指定“圆圈”指定度数
384
385 * */
386
387 let rotateTag = function(tag , deg){
388
389 tag.style.transform = "rotate("+deg+"deg)";
390
391 };
392
393 let main = function(){
394
395 initRili(); // 初始化日历
396
397 setInterval(function(){
398
399 let mydate = new Date();
400
401 showNow( mydate ); // 展示当前时间
402
403 },1000);
404
405 // n秒后，摆出圆形
406
407 setTimeout(function(){
408
409 wrapper.className = "wrapper";
410
411 textRound(yueBox,12,40);
412
413 textRound(riqiBox,31,80);
414
415 textRound(hourbox,24,120);
416
417 textRound(minutebox,60,160);
418
419 textRound(secondbox,60,200);
420
421 setInterval(function(){
422
423 let mydate = new Date();
424
425 rotateTag( yueBox , -30*mydate.getMonth());
426
427 rotateTag( riqiBox , -360/31*(mydate.getDate()-1) );
428
429 rotateTag( hourbox , -360/24*mydate.getHours());
430
431 rotateTag( minutebox , -6*mydate.getMinutes());
432
433 rotateTag( secondbox , -6*mydate.getSeconds());
434
435 },1000)
436
437 },100)
438
439 };
440
441 main();
442
443 script>
444 <p><a href="" alt="ygxinjian" target="_blank">ygxinjiana>p>
445 body>
446
447 html>
原文：https://www.cnblogs.com/ygxinjian/p/14874211.html