JS石英钟实现
JS石英钟练习
1 概述
随着前端技术的发展，越来越多的H5技术被应用到实际开发中，本章我们介绍一个显示系统时间的石英钟小玩意。
2 效果图如下：
3 主要功能
显示系统时间，
以防不时之需。
适于初学者应用。
4实现方式
首先 ，我们需要四张图片，分别是表盘，时针，分针，秒针。这些图片大家从网上找素材即可。代码如下，四张照片依次是表盘，秒针，分针，时针。
<body>
<imgclass="img1"
id="img1"src="11.png"alt=""/>
<imgclass="img2"id="img2"src="22.png"alt=""/>
<imgclass="img3"
id="img3"src="33.png"alt=""/>
<imgclass="img4"id="img4"src="44.png"alt=""/>
</body>
接下来，我们给予四张照片的样式，主要调节，照片的大小，位置等。代码如下。
<style>
.img1{
float: left;
}
.img2{
float: left;
width:
10px;
position:
absolute;
left:
182px;
top:
102px;
z-index:3;
transform-origin:bottom;
}
.img3{
float: left;
width:
20px;
position:
absolute;
left:
177px;
top:
35px;
z-index:2;
transform-origin:bottom;
}
.img4{
float: left;
width:
15px;
position:
absolute;
left:
177px;
top:
104px;
z-index:1;
transform-origin:bottom;
}
</style>
注意，z-index必须有position属性才能使用，目的是控制照片显示前后，数字越大，显示越往上。
接下来，我们就要给予图片的事件了。
setInterval(function(){
var date=newDate();
var seconds=date.getSeconds()
var min=date.getMinutes()
var hour=date.getHours()
var img2=document.getElementById("img2");
var img3=document.getElementById("img3");
var img4=
document.getElementById("img4");
img2.style.transform="rotate("+(seconds*6)+"deg)
";
img3.style.transform="rotate("+(min*6+seconds/10)+"deg)
"
img4.style.transform=
"rotate("+(hour*30+min/2)+"deg)
"
},1);
这里给予时针分针秒针定时器，不停地在调用。
var date=newDate();创建date对象，用于处理日期和时间。
注意Date 对象会自动把当前日期和时间保存为其初始值。
var seconds=date.getSeconds()返回
Date 对象的秒数 (0 ~ 59)。
var min=date.getMinutes()返回
Date 对象的分钟 (0 ~ 59)。
var hour=date.getHours()返回
Date 对象的小时 (0 ~ 23)。
img2.style.transform="rotate("+(seconds*6)+"deg)
";
img3.style.transform="rotate("+(min*6+seconds/10)+"deg)
"
img4.style.transform=
"rotate("+(hour*30+min/2)+"deg)
"
这里img2是秒针，一秒钟转六度，实时更新，img3是分针，得到当前系统时间后，在加上秒针实时更新的度数，是旋转的更平滑。Img4时针，同理。
5总结
到这简单的石英钟实现就完成了，大家可以找点更好看的图片，使得石英钟更美观，希望大家互相交流，公同进步。
下面给出完整代码：
<!DOCTYPE html>
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
<style>
.img1{
float:
left;
}
.img2{
float:
left;
width:
10px;
position:
absolute;
left:
182px;
top:
102px;
z-index:3;
transform-origin:bottom;
}
.img3{
float:
left;
width:
20px;
position:
absolute;
left:
177px;
top:
35px;
z-index:2;
transform-origin:bottom;
}
.img4{
float:
left;
width:
15px;
position:
absolute;
left:
177px;
top:
104px;
z-index:1;
transform-origin:bottom;
}
</style>
<script>
setInterval(function(){
var date=newDate();
var seconds=date.getSeconds()
var min=date.getMinutes()
var hour=date.getHours()
var img2=document.getElementById("img2");
var img3=document.getElementById("img3");
var img4=
document.getElementById("img4");
img2.style.transform="rotate("+(seconds*6)+"deg)
";
img3.style.transform="rotate("+(min*6+seconds/10)+"deg)
"
img4.style.transform ="rotate("+(hour*30+min/2)+"deg)
"
},1);
</script>
</head>
<body>
<imgclass="img1"
id="img1"src="11.png"alt=""/>
<imgclass="img2"id="img2"src="22.png"alt=""/>
<imgclass="img3"
id="img3"src="33.png"alt=""/>
<imgclass="img4"id="img4"src="44.png"alt=""/>
</body>
</html>