之前用“面向过程”的方式写过一个转动时钟，今天突然想要用“面向对象”的方式试一试，写完啦！
js代码：
(
function(
document) {
// 把document保存为局部变量
var
doc =
document;
// 所需元素,timer表示定时器
var
ele = {
eleHour:
doc.
getElementsByClassName(
"hour")[
0],
eleMin:
doc.
getElementsByClassName(
"min")[
0],
eleSec:
doc.
getElementsByClassName(
"sec")[
0],
timer:
null
};
// Time构造函数
function
Time(
hour,
min,
sec) {
this.
hour =
hour;
this.
min =
min;
this.
sec =
sec;
}
// 由于对Time原型重写，所以需要指定Time原型的constructor属性指向Time
Object.
defineProperty(
Time.
prototype,
"constructor",{
enumerable:
false,
value:
Time
})
// Time原型，用于保存下列方法
Time.
prototype = {
// 设置时针转动的度数
setHourT
:
function() {
return
this.
hour*
30+
0.5*
this.
min+
0.5/
60*
this.
sec;
},
// 设置分针转动的度数
setMinT
:
function() {
return
this.
min*
6+
0.1*
this.
sec;
},
// 设置秒针转动的度数
setSecT
:
function() {
return
this.
sec*
6;
}
};
// 每隔一秒钟重新获取一次时间
ele.
timer =
setInterval(
function() {
var
nowTime =
new
Date(),
h =
nowTime.
getHours();
m =
nowTime.
getMinutes();
s =
nowTime.
getSeconds();
var
time =
new
Time(
h,
m,
s);
ele.
eleSec.
style.
transform =
"rotate("+
time.
setSecT() +
"deg)";
ele.
eleMin.
style.
transform =
"rotate("+
time.
setMinT() +
"deg)";
ele.
eleHour.
style.
transform =
"rotate("+
time.
setHourT() +
"deg)";
},
1000)
// 清除定时器
return
function() {
clearInterval(
ele.
timer);
}
})(
document);
// 顺便复习下
// var time = new Date();
// time.getFullYear();time.getYear();
// time.getMonth();
// time.getData();
// time.getHours();
// time.getMinutes();
// time.getSeconds();
// time.getMilliseconds();
html代码：
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
link
rel=
"stylesheet"
href=
"time.css"
>
<
title
>时钟
</
title
>
</
head
>
<
body
>
<
div
id=
"clock"
>
<
div
class=
"hms"
>
<!-- 时针 -->
<
div
class=
"hour"
></
div
>
<!-- 分针 -->
<
div
class=
"min"
></
div
>
<!-- 秒针 -->
<
div
class=
"sec"
></
div
>
</
div
>
</
div
>
<
script
src=
"time.js"
>
<
/
script
>
</
body
>
</
html
>
css代码：
/* init */
html,body {
width:
100%;
height:
100%;
}
body,ul {
margin:
0;
}
ul {
padding:
0;
list-style:
none;
}
/* clock */
#clock {
display:
flex;
-webkit-justify-content:
center;
-moz-justify-content:
center;
-ms-justify-content:
center;
justify-content:
center;
-webkit-align-items:
center;
-ms-align-items:
center;
-moz-align-items:
center;
align-items:
center;
width:
300px;
height:
300px;
margin:
60px
auto;
border-radius:
50%;
box-shadow:
0
0
15px;
}
.hms {
position:
relative;
display:
inline-block;
width:
30px;
height:
30px;
background-color:
#333;
border-radius:
50%;
}
.hms div {
position:
absolute;
bottom:
50%;
background-color:
#333;
transform-origin:
center
bottom;
}
.hms .hour {
left:
calc(
50% -
10px/
2);
width:
10px;
height:
80px;
}
.hms .hour::after {
content:
"";
position:
absolute;
left:
0;
bottom:
79px;
border-width:
14px
5px;
border-style
:
solid
;
border-color: transparent transparent #333 transparent;
}
.hms .min {
left:
calc(
50% -
8px/
2);
width:
8px;
height:
110px;
transform:
rotate(
15deg);
}
.hms .min::after {
content:
"";
position:
absolute;
left:
0;
bottom:
109px;
border-width
:
12px
4px
;
border-style:
solid;
border-color
:
transparent
transparent
#333
transparent
;
}
.hms .sec {
left:
calc(
50% -
6px/
2);
width:
6px;
height:
120px;
transform:
rotate(
30deg);
}
.hms .sec::after {
content:
"";
position:
absolute;
left:
0;
bottom:
119px;
border-width:
10px
3px;
border-style
:
solid
;
border-color: transparent transparent #333 transparent;
}
css总结：
// 1.box-shadow：IE8-不支持加兼容前缀没用
// 2.box-radius：IE8-不支持，加兼容前缀没用
// 3.flex弹性布局：IE完全不支持，加兼容前缀只能兼容到IE10
// 4.transform: IE8-不支持，加兼容前缀没用
github: https://github.com/COMINGLIU/skills.github.io