1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 #wrap{
8 width: 250px;
9 height: 250px;
10 border-radius: 50%;
11 background: -webkit-linear-gradient(top,rgb(205,220,207) 10px,rgb(119,119,119));
12 position: relative;
13 margin: 20px auto 0;
14 }
15 #clock{
16 width: 230px;
17 height: 230px;
18 border-radius: 50%;
19 background: white;
20 position: absolute;
21 left: 10px;
22 top: 10px;
23 }
24 #number{
25 width: 100%;
26 height: 100%;
27 position: relative;
28 }
29 #number div{
30 width: 210px;
31 height: 22px;
32 position: absolute;
33 top: 104px;
34 left: 10px;
35 }
36 #number span{
37 display: block;
38 width: 22px;
39 height: 22px;
40 text-align: center;
41 line-height: 22px;
42 font-size: 20px;
43 }
44 #hour{
45 width: 5px;
46 height: 70px;
47 background: black;
48 opacity: 0.6;
49 }
50 #minute{
51 width: 3px;
52 height: 90px;
53 background: purple;
54 opacity: 0.6;
55 }
56 #second{
57 width: 2px;
58 height: 90px;
59 background: red;
60 opacity: 0.6;
61 }
62 .pointer{
63 position: absolute;
64 bottom: 105px;
65 left: 110px;
66 /*修改旋转点*/
67 transform-origin: 50% bottom;
68 }
69 </style>
70 </head>
71 <body>
72 <div id="wrap">
73 <div id="clock">
74 <div id="number">
75 <div><span>9</span></div>
76 <div><span>10</span></div>
77 <div><span>11</span></div>
78 <div><span>12</span></div>
79 <div><span>1</span></div>
80 <div><span>2</span></div>
81 <div><span>3</span></div>
82 <div><span>4</span></div>
83 <div><span>5</span></div>
84 <div><span>6</span></div>
85 <div><span>7</span></div>
86 <div><span>8</span></div>
87 </div>
88 <div id="hour" class="pointer"></div>
89 <div id="minute" class="pointer"></div>
90 <div id="second" class="pointer"></div>
91 </div>
92 </div>
93 </body>
94
95 <script type="text/javascript">
96 function rotateNumber(){
97 var number = document.getElementById("number");
98 var numberDivArray = number.getElementsByTagName("div");
99 var numberSpanArray = number.getElementsByTagName("span");
100 // 旋转
101 for(var i = 0; i < numberDivArray.length;i++){
102 var rot = i *30;
103 numberDivArray[i].style.transform = "rotate("+rot+"deg)";
104 numberSpanArray[i].style.transform = "rotate("+ (-rot) +"deg)";
105 }
106 }
107 rotateNumber();
108 // 获取秒针、分、时针的 div 块
109 var secondDiv = document.getElementById("second");
110 var minuteDiv = document.getElementById("minute");
111 var hourDiv = document.getElementById("hour");
112
113 function dateFunction(){
114 var nowDate = new Date();
115 // 获取当前小时
116 var nowHour = nowDate.getHours();
117 // 获取当前分钟
118 var nowMinute = nowDate.getMinutes();
119 // 获取当前秒数
120 var nowSecond = nowDate.getSeconds();
121
122 // 旋转秒针 一圈360deg 60秒转完，一秒转6deg
123 // nowSecond *6 "rotate(" +nowSecond * 6 +"deg)"
124 secondDiv.style.transform = "rotate("+nowSecond*6+"deg)";
125
126 // 旋转分针 一圈360deg 60分钟转完，一分转6deg
127 var minuteDeg = nowMinute * 6 + nowSecond / 60 * 6;
128 minuteDiv.style.transform = "rotate("+minuteDeg+"deg)";
129
130 // 旋转时针 一圈360deg 12小时转完 一小时转30deg
131 var hourDeg = nowHour * 30 + 30 / 60 * nowMinute;
132 hourDiv.style.transform = "rotate("+hourDeg+"deg)";
133 }
134 // dateFunction();
135 setInterval(function(){
136 dateFunction();
137 },30);
138
139
140
141 </script>
142 </html>
