本文实例为大家分享了js+css3实现炫酷时钟的具体代码，供大家参考，具体内容如下
html
|
1
2
3
|
<body> <ul id='box'></ul></body> |
css
|
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
|
<style> *{ margin: 0; padding: 0; } body{ background-color: #aaa; } ul{ width: 400px; height: 400px; border: 5px solid skyblue; margin: 100px auto 0 auto; border-radius: 50%; background: radial-gradient(green 50%, yellow 100%);; position: relative; } ul li{ width: 2px; height: 15px; list-style: none; background-color: #fff; position: absolute; left: 199px; transform-origin: center 200px; } h1{ width: 2px; height: 180px; background-color: orange; position: absolute; left: 199px; top:20px; -transition: 1s linear; transform-origin: center 180px; } h2{ width: 6px; height: 160px; background-color: #fff; position: absolute; left: 197px; top:40px; transform-origin: center 160px; border-radius:20%; } h3{ width: 8px; height: 140px; background-color: #fff; position: absolute; left: 196px; top:60px; transform-origin: center 140px; transform: rotate(0deg); border-radius: 20%; } h4{ width: 30px; height: 30px; position: absolute; left: 185px; top:185px; border-radius: 50%; background-color: orange; } span{ display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 24px; position: absolute; left: -10px; top: 28px; color: #fff; }</style> |
js
|
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
|
(function(){ var oul=document.getelementbyid('box'); var timer=null; for(var i=0,j=0;i<60;i++,j+=6){ var oli=document.createelement('li'); oli.style.transform='rotate('+j+'deg)'; if(i%5==0){ oli.style.height='20px'; var ospan=document.createelement('span'); ospan.style.transform='rotate('+(-j)+'deg)'; if(i==0){ ospan.innerhtml='12'; ospan.style.fontsize='30px'; ospan.style.left='-17px'; }else{ ospan.innerhtml=parseint(i/5); if(i%15==0){ ospan.style.fontsize='36px'; } } oli.appendchild(ospan); } if(i==0){ var oh1=document.createelement('h1'); var oh2=document.createelement('h2'); var oh3=document.createelement('h3'); var oh4=document.createelement('h4'); oul.appendchild(oh1); oul.appendchild(oh2); oul.appendchild(oh3); oul.appendchild(oh4); } oul.appendchild(oli); } var oh=document.getelementsbytagname('h3')[0]; var om=document.getelementsbytagname('h2')[0]; var os=document.getelementsbytagname('h1')[0]; timer=setinterval(function(){ var now = new date(); var s=now.getseconds(); var m=now.getminutes()+s/60; var h=now.gethours()+m/60; os.style.transform='rotate('+s*6+'deg)'; om.style.transform='rotate('+m*6+'deg)'; oh.style.transform='rotate('+(h%12)*30+'deg)'; },30); })(); |
作品截图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_34659400/article/details/74178967
