1
2
3
4
5
6
7
8
9
动态时钟10
11 * {
12 margin: 0;
13 padding: 0;
14 background: gray;
15 }
16
17 .wrapper {
18 position: absolute;
19 left: 50%;
20 top: 50%;
21 margin-top: -150px;
22 margin-left: -150px;
23 width: 300px;
24 height: 300px;
25 /* background: white; */
26 }
27
28 .horologe {
29 /* 没有指针的时钟图片 */
30 background: url(img/原子钟2.png);
31 background-size: 100%;
32 width: 100%;
33 height: 100%;
34 border-radius: 50%;
35 display: flex;
36 justify-content: center;
37 align-items: center;
38 }
39
40 /* 圆心 */
41 .clock {
42 background: red;
43 width: 10px;
44 height: 10px;
45 border-radius: 50%;
46 }
47
48 /* 刻度在没有背景图片时使用 */
49 .scale {
50 position: absolute;
51 background: red;
52 width: 5px;
53 height: 15px;
54 border-radius: 5px;
55 }
56
57 .shi {
58
59 display: flex;
60 flex-direction: row;
61 justify-content: center;
62 background: rgb(28, 28, 29);
63 width: 6px;
64 height: 80px;
65 /* transform: rotate(0deg); */
66 transform-origin: 3px 70px;
67 border-radius: 5px;
68 position: absolute;
69 top: 80px;
70 }
71
72 .shi::before {
73 content: '';
74 display: block;
75 width: 5px;
76 height: 10px;
77 background: rgb(28, 28, 29);
78 transform: rotate(160deg);
79 position: relative;
80 top: -5px;
81 left: 3px;
82 border-radius: 50%;
83 }
84
85 .shi::after {
86 position: relative;
87 content: '';
88 display: block;
89 width: 5px;
90 height: 10px;
91 background: rgb(28, 28, 29);
92 transform: rotate(-160deg);
93 top: -5px;
94 left: -3px;
95 border-radius: 50%;
96 }
97
98 .fen {
99 display: flex;
100 flex-direction: row;
101 justify-content: center;
102 background: rgb(28, 28, 29);
103 width: 4px;
104 height: 115px;
105 /* transform: rotate(10deg); */
106 transform-origin: 2px 100px;
107 border-radius: 5px;
108 position: absolute;
109 top: 50px;
110 }
111
112 .miao {
113 display: flex;
114 flex-direction: row;
115 justify-content: center;
116 background: rgb(28, 28, 29);
117 width: 1px;
118 height: 150px;
119 /* transform: rotate(0deg); */
120 transform-origin: 0.5px 130px;
121 border-radius: 5px;
122 position: absolute;
123 top: 20px;
124 }
125
126
127
128
129
130
131
132
133
134
135
136
137
138 var horologe = document.getElementsByClassName("horologe")[0];
139 // 时针
140 var shi = document.getElementsByClassName('shi')[0];
141 // 分针
142 var fen = document.getElementsByClassName('fen')[0];
143 // 秒针
144 var miao = document.getElementsByClassName('miao')[0];
145 createScale()
146 // 调用
147 setInitTime();
148 setInterval(function () {
149 var setDate = new Date();
150 var seconds = setDate.getSeconds();
151 var minutes = setDate.getMinutes();
152 var hours = setDate.getHours();
153 elapse(hours, minutes, seconds)
154 }, 1000);
155 function createScale() {
156 for (var i = 1; i <= 12; i++) {
157 var scale = document.createElement("div");
158 scale.setAttribute('class', "scale");
159 if (i == 12 || i == 3 || i == 6 || i == 9) {
160 // 3、6、9、12的刻度宽一点
161 scale.style.width = '10' + 'px';
162 }
163 scale.style.transform = "rotate(" + (30 * i) + "deg) translateY(-142px)";
164 //生成刻度
165 horologe.appendChild(scale)
166 }
167 }
168 // 初始时间
169 function setInitTime() {
170 // 获取当前时间
171 var date = new Date();
172 // 获取当前时
173 var hours = date.getHours();
174 // var hours = 12;
175 // 获取当前分
176 var minutes = date.getMinutes()
177 // var minutes = 10;
178 // 获取当前秒
179 var seconds = date.getSeconds();
180 // var seconds = 30;
181 elapse(hours, minutes, seconds)
182 }
183
184 //时间在流逝,不曾停歇
185 function elapse(hours, minutes, seconds) {
186 // 时针 一小时走30deg 一分钟走0.5deg 一秒走0.1/12 deg; 十分钟分钟5度
187 // 分针 一小时走360deg 一分钟走6deg 一秒走 0.1deg 十分钟60度 速度是时针的12倍
188 // 秒针 一分钟走360deg 一分钟360deg 一秒走6deg 十分钟 3600deg 速度是分针的60倍 时针的720倍
189 shi.style.transform = "rotate(" + ((hours * 30) + ((minutes * 6) + seconds * (6 / 60)) / 12) + "deg)";
190 fen.style.transform = "rotate(" + ((minutes * 6) + seconds * (6 / 60)) + "deg)";
191 miao.style.transform = "rotate(" + (seconds * 6) + "deg)";
192 }
193
194
195
196