1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 list-style: none;
11 }
12 .clock{
13 width:300px;
14 height:300px;
15 background: -webkit-radial-gradient(center center,circle, #eee,#666);
16 /*background: url(tick.png) no-repeat;*/
17 background-size: cover;
18 border-radius: 50%;
19 position: absolute;
20 left: 100px;
21 top: 100px;
22 border: 1px solid #000;
23 box-shadow: 0px 0px 4px #000;
24 }
25 .cap{
26 width: 20px;
27 height: 20px;
28 background: -webkit-radial-gradient(center center,circle,#ccc,#000);
29 position: absolute;
30 left: 50%;
31 top: 50%;
32 margin-top: -10px;
33 margin-left: -10px;
34 border-radius: 50%;
35 }
36 .hour{
37 width:14px;
38 height:80px;
39 background: #000;
40 position: absolute;
41 left: 50%;
42 margin-left: -7px;
43 top: 50%;
44 margin-top: -80px;
45 border-radius: 50% 50% 0 0;
46
47 transform-origin: center bottom;
48
49
50 }
51 .min{
52 width:10px;
53 height:100px;
54 background: #000;
55
56 position: absolute;
57 left: 50%;
58 margin-left: -5px;
59 top: 50%;
60 margin-top: -100px;
61 border-radius: 50% 50% 0 0;
62
63 transform-origin: center bottom;
64
65 }
66 .sec{
67 width:4px;
68 height:120px;
69 background: #f00;
70
71 position: absolute;
72 left: 50%;
73 margin-left: -2px;
74 top: 50%;
75 margin-top: -120px;
76 border-radius: 50% 50% 0 0;
77
78 transform-origin: center bottom;
79 }
80 .scale{
81 width:2px;
82 height:10px;
83 background: #000;
84 position: absolute;
85 left: 50%;
86 margin-left: -1px;
87 transform-origin: center 150px;
88 }
89 .bs{
90 width:4px;
91 height:14px;
92 background: #000;
93 position: absolute;
94 left: 50%;
95 margin-left: -2px;
96 transform-origin: center 150px;
97 }
98 .bs strong{
99 margin-top: 20px;
100 position: absolute;
101 font-size: 24px;
102 width:100px;
103 text-align: center;
104 left: 50%;
105 margin-left: -50px;
106 text-shadow: 1px 1px 3px #000;
107 }
108 </style>
109 <script>
110 window.onload=function(){
111 var oDiv=document.querySelector('.clock');
112
113 var oH=document.querySelector('.clock .hour');
114 var oM=document.querySelector('.clock .min');
115 var oS=document.querySelector('.clock .sec');
116
117 //画刻度
118 var N=60;
119 for(var i=0; i<N; i++){
120 var oSpan=document.createElement('span');
121
122 if(i%5==0){
123 oSpan.className='bs';
124
125 var n=i/5==0?12:i/5;
126
127 oSpan.innerHTML='<strong>'+n+'</strong>';
128 oSpan.children[0].style.transform='rotate('+-i*6+'deg)';
129 }else{
130 oSpan.className='scale';
131 }
132
133 oSpan.style.transform='rotate('+6*i+'deg)';
134 oDiv.appendChild(oSpan);
135 }
136
137 function tick(){
138 var oDate=new Date();
139 var h=oDate.getHours();
140 var m=oDate.getMinutes();
141 var s=oDate.getSeconds();
142 var ms=oDate.getMilliseconds();
143
144 oH.style.transform='rotate('+(h*30+m/60*30)+'deg)';
145 oM.style.transform='rotate('+(m*6+s/60*6)+'deg)';
146 oS.style.transform='rotate('+(s*6+ms/1000*6)+'deg)';
147 }
148 tick();
149 setInterval(tick,30);
150
151 //以下拖拽
152 var iSpeedX=0;
153 var iSpeedY=0;
154
155 var lastX=0;
156 var lastY=0;
157
158 var timer=null;
159
160 oDiv.onmousedown=function(ev){
161 var oEvent=ev || event;
162 var disX=oEvent.clientX-oDiv.offsetLeft;
163 var disY=oEvent.clientY-oDiv.offsetTop;
164
165 clearInterval(timer);
166
167 document.onmousemove=function(ev){
168 var oEvent=ev || event;
169 oDiv.style.left=oEvent.clientX-disX+'px';
170 oDiv.style.top=oEvent.clientY-disY+'px';
171
172 //计算速度
173 iSpeedX=oEvent.clientX-lastX;
174 iSpeedY=oEvent.clientY-lastY;
175
176 lastX=oEvent.clientX;
177 lastY=oEvent.clientY;
178 };
179
180 document.onmouseup=function(){
181 document.onmousemove=null;
182 document.onmouseup=null;
183
184 duangMove();
185 };
186 return false;
187 };
188
189 function duangMove(){
190 timer=setInterval(function(){
191 iSpeedY+=3;
192
193 var l=oDiv.offsetLeft+iSpeedX;
194 var t=oDiv.offsetTop+iSpeedY;
195
196 if(t>=document.documentElement.clientHeight-oDiv.offsetHeight){
197 t=document.documentElement.clientHeight-oDiv.offsetHeight;
198 iSpeedY*=-0.8;
199 iSpeedX*=0.8;
200 }
201 if(t<=0){
202 t=0;
203 iSpeedY*=-0.8;
204 iSpeedX*=0.8;
205 }
206 if(l>=document.documentElement.clientWidth-oDiv.offsetWidth){
207 l=document.documentElement.clientWidth-oDiv.offsetWidth;
208 iSpeedX*=-0.8;
209 iSpeedY*=0.8;
210 }
211 if(l<=0){
212 l=0;
213 iSpeedX*=-0.8;
214 iSpeedY*=0.8;
215 }
216
217 oDiv.style.left=l+'px';
218 oDiv.style.top=t+'px';
219
220 if(Math.abs(iSpeedX)<1)iSpeedX=0;
221 if(Math.abs(iSpeedY)<1)iSpeedY=0;
222
223 if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight){
224 clearInterval(timer);
225 }
226 },30);
227 }
228 };
229 </script>
230 </head>
231 <body>
232 <div class="clock">
233 <div class="hour"></div>
234 <div class="min"></div>
235 <div class="sec"></div>
236 <div class="cap"></div>
237 </div>
238 </body>
239 </html>
浙公网安备 33010602011771号