1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 div{
8 width:200px;
9 height:200px;
10 border-radius: 50%;
11 border:1px solid #000;
12 position: relative;
13 margin:5px auto;
14 text-align: center;
15 box-shadow: 0px 0px 20px 5px #000;
16 }
17 div span{
18 transform-origin: bottom center;
19 }
20 .sec{
21 position: absolute;
22 top:50%;
23 left:50%;
24 margin-left:-2px;
25 margin-top:-80px;
26 height:80px;
27 width:4px;
28 background: red;
29 border-radius: 50% 50% 0 0;
30 }
31 .min{
32 position: absolute;
33 top:50%;
34 left:50%;
35 margin-left:-3px;
36 margin-top:-60px;
37 height:60px;
38 width:6px;
39 background: #000;
40 border-radius: 50% 50% 0 0;
41 }
42 .hou{
43 position: absolute;
44 top:50%;
45 left:50%;
46 margin-left:-4px;
47 margin-top:-40px;
48 height:40px;
49 width:8px;
50 background: #000;
51 border-radius: 50% 50% 0 0;
52 }
53 .cap{
54 position: absolute;
55 top:50%;
56 left:50%;
57 margin-left:-6px;
58 margin-top:-6px;
59 height:12px;
60 width:12px;
61 background: radial-gradient(#ccc,#999);
62 border-radius: 50%;
63 }
64 i b{
65 position: absolute;
66 top:12px;
67 left:-4px;
68 }
69 </style>
70 <script>
71 window.onload=function(){
72 var aSpan=document.querySelectorAll(‘span‘);
73 var oBox=document.getElementById(‘box‘);
74 clock();
75 setInterval(clock,30);
76
77 for (var i = 0; i <60; i++) {
78 var oI=document.createElement(‘i‘);
79 oI.style.width=‘6px‘;
80 if(i%5){
81 oI.style.height=‘8px‘;
82 }else{
83 oI.innerHTML=‘<b>‘+i/5+‘</b>‘;
84 oI.children[0].style.transform=‘rotate(-‘+i*6+‘deg)‘;
85 oI.style.height=‘16px‘;
86 }
87
88 oI.style.position=‘absolute‘;
89 oI.style.top=‘0px‘;
90 oI.style.left=‘100px‘;
91 oI.style.background=‘#000‘;
92 oI.style.transform=‘rotate(‘+i*6+‘deg)‘;
93 oI.style.transformOrigin=‘0px 100px‘;
94
95 oBox.appendChild(oI);
96 }
97 function clock(){
98 var oDate=new Date();
99 var h=oDate.getHours();
100 var m=oDate.getMinutes();
101 var s=oDate.getSeconds();
102 var ms=oDate.getMilliseconds();
103
104 aSpan[2].style.transform=‘rotate(‘+(360*(h%12)/12+m*30/60)+‘deg)‘;
105 aSpan[1].style.transform=‘rotate(‘+(360*m/60+s*6/60)+‘deg)‘;
106 aSpan[0].style.transform=‘rotate(‘+(360*s/60+ms*6/1000)+‘deg)‘;
107 }
108 };
109 </script>
110 </head>
111 <body>
112 <div id="box">
113 <span class="sec"></span>
114 <span class="min"></span>
115 <span class="hou"></span>
116 <p class="cap"></p>
117 </div>
118 </body>
119 </html>
时间： 2024-07-29 11:51:53