Visitar URL original
02 · soyaine/JavaScript30@6751508 · GitHub
Skip to content

Commit 6751508

Browse files
xiaobenlikexiaobenlike
committed
02
1 parent ba68698 commit 6751508

1 file changed

Lines changed: 218 additions & 0 deletions

File tree

‎02 - JS + CSS Clock/index-START-XIAOBENLIKE.html‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS + CSS Clock</title>
6+
</head>
7+
<body>
8+
9+
10+
<div class="clock">
11+
<div class="clock-face">
12+
<div class="hand hour-hand trans"></div>
13+
<div class="hand min-hand trans"></div>
14+
<div class="hand second-hand trans"></div>
15+
</div>
16+
</div>
17+
18+
19+
<style>
20+
html {
21+
/*background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);*/
22+
background-size:cover;
23+
font-family:'helvetica neue';
24+
text-align: center;
25+
font-size: 10px;
26+
}
27+
28+
body {
29+
font-size: 2rem;
30+
display:flex;
31+
flex:1;
32+
min-height: 100vh;
33+
align-items: center;
34+
}
35+
36+
.clock {
37+
width: 30rem;
38+
height: 30rem;
39+
border:20px solid white;
40+
border-radius:50%;
41+
margin:50px auto;
42+
position: relative;
43+
padding:2rem;
44+
box-shadow:
45+
0 0 0 4px rgba(0,0,0,0.1),
46+
inset 0 0 0 3px #EFEFEF,
47+
inset 0 0 10px black,
48+
0 0 10px rgba(0,0,0,0.2);
49+
}
50+
51+
.clock-face {
52+
position: relative;
53+
width: 100%;
54+
height: 100%;
55+
transform: translateY(-3px); /* account for the height of the clock hands */
56+
}
57+
.clock-face:after{
58+
width: 1em;
59+
height: 1em;
60+
left: 50%;
61+
top: 50%;
62+
position: absolute;
63+
display: block;
64+
content: '';
65+
background-color: #a8c5d1;
66+
border-radius: 50%;
67+
box-shadow:
68+
0 0 0 2px rgba(0,0,0,0.1),
69+
0 0 10px rgba(0,0,0,0.2);
70+
transform: translate(-50%, -50%);
71+
/*transition: all .05s;*/
72+
73+
}
74+
.hand {
75+
width:50%;
76+
height:6px;
77+
background:black;
78+
position: absolute;
79+
top:50%;
80+
right: 50%;
81+
transform-origin: 100% 50%;
82+
transform: rotate(90deg);
83+
}
84+
.hour-hand.trans{
85+
transition: all .9s;
86+
}
87+
.hour-hand{
88+
width: 30%;
89+
height: 15px;
90+
}
91+
.min-hand.trans{
92+
transition: all .5s;
93+
}
94+
.min-hand{
95+
width: 40%;
96+
height: 10px;
97+
}
98+
.second-hand.trans{
99+
transition: all .3s;
100+
}
101+
.second-hand{
102+
width: 45%;
103+
height: 5px;
104+
background: red;
105+
}
106+
</style>
107+
108+
<script>
109+
/*
110+
主要是调整transform:rotate(xxdeg);
111+
*/
112+
const CLOCK = function(){
113+
const Dom = (function(){
114+
// 改变转动的角度
115+
return {
116+
rotate: function(ele, deg){
117+
ele.style.transform = `rotate(${deg}deg)`;
118+
}
119+
};
120+
})();
121+
const Tools = (function(){
122+
return {
123+
// 将时间转换为度数
124+
transTimeToDeg: function(date, type){
125+
let time, deg;
126+
switch(type){
127+
case "hour":
128+
time = date.getHours();
129+
deg = ~~(time%12/12*360);
130+
break;
131+
case "min":
132+
time = date.getMinutes();
133+
deg = ~~(time/60*360);
134+
break;
135+
case "second":
136+
time = date.getSeconds();
137+
deg = ~~(time/60*360);
138+
break;
139+
}
140+
return deg;
141+
},
142+
/*
143+
计算时间
144+
@param difference 毫秒值
145+
@param source 时间的字符串
146+
@return 计算后的日期
147+
*/
148+
addTime: function(difference, source){
149+
const date = source ? new Date(source) : new Date();
150+
let time = date.getTime();
151+
if(difference){
152+
time += difference;
153+
date.setTime(time);
154+
}
155+
return date;
156+
},
157+
/*
158+
计算两个时间的差值
159+
@param date1,date2 为日期类型
160+
*/
161+
calcTime: function(date1, date2){
162+
return date1.getTime() - date2.getTime();
163+
}
164+
};
165+
})();
166+
const Item = (function(){
167+
const _ele = {
168+
hour: document.querySelector(".hour-hand"),
169+
min: document.querySelector(".min-hand"),
170+
second: document.querySelector(".second-hand"),
171+
};
172+
let _difference, _timeFlag;
173+
return {
174+
// 停止
175+
stop: function(){
176+
clearInterval(_timeFlag);
177+
},
178+
// 开始
179+
start: function(){
180+
_timeFlag = setInterval(Item.changeDeg, 1000);
181+
},
182+
// 设置时间
183+
setTime: function(timeStr){
184+
const now = new Date(),
185+
dateStr = now.toLocaleDateString(),
186+
_time = new Date(dateStr + " " + timeStr);
187+
_difference = Tools.calcTime(_time, now);
188+
},
189+
changeDeg: function(){
190+
const now = Tools.addTime(_difference);
191+
let name, deg, ele;
192+
for(name in _ele ){
193+
deg = 90 + Tools.transTimeToDeg(now, name);
194+
ele = _ele[name];
195+
if(deg == 90){
196+
ele.classList.remove("trans");
197+
}else{
198+
ele.classList.add("trans");
199+
}
200+
Dom.rotate(ele, deg);
201+
}
202+
}
203+
};
204+
})();
205+
206+
// 设置时间
207+
this.setTime = Item.setTime;
208+
// 开始转动
209+
this.start = Item.start;
210+
//停止转动
211+
this.stop = Item.stop;
212+
213+
}
214+
let c = new CLOCK();
215+
c.start();
216+
</script>
217+
</body>
218+
</html>

0 commit comments

Comments
 (0)