制作思路
1.首先需要时钟的背景图片,时针图片,分针图片,秒针图片。钟背景图片固定(相对定位),时/分/秒针图片旋转(绝对定位);
2.设置定时器;
3.获取系统时间,时/分/秒/毫秒;
4.秒针图片每秒旋转6°,分针每分针旋转6°,时针每小时旋转30°。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#clock {
position: relative;
}
#clock img{
position: absolute;
}
</style>
</head>
<body>
<div id="clock">
<img src="img/clock.png" height="125" width="125"/>//时钟4张图片宽高一致,且宽等于高;
<img src="img/h.png" height="125" width="125"/>
<img src="img/m.png" height="125" width="125"/>
<img src="img/s.png" height="125" width="125"/>
</div>
<script type="text/javascript">
var imgs = document.getElementsByTagName("img");
//设置定时器
setInterval(function () {
// 3. 获取数据
var $d = new Date();
var h = $d.getHours();// 获取系统小时
var m = $d.getMinutes();//获取系统分
var s = $d.getSeconds();//获取系统秒
var ms = $d.getMilliseconds();//获取系统毫秒
// 4. 逻辑计算
var _h = h+m/60;//如1点30分,即1.5小时,时针应旋转45°,位于1点和2点的正中间;
var _m = m+s/60;
var _s = s+ms/1000;
// 5. 应用数据
imgs[1].style.transform = "rotate("+(_h*30)+"deg)";//时针每小时旋转30°
imgs[2].style.transform = "rotate("+(_m*6)+"deg)";
imgs[3].style.transform = "rotate("+(_s*6)+"deg)";
},30);
</script>
</body>
</html>