这个小案例主要是对transform的应用。
时钟的3个表针分别是3个png图片，通过setInterval来让图片转动。时，分，秒的转动角度分别是30，6，6度。
首先，通过new Date函数获取当前时间，通过date.getSeconds()，date.getMinutes(),date.getHours()获得秒，分，时，之所以按这个顺序，是因为下面的变量会有对上面的计算，如果按时，分，秒的顺序，则会报错。
其次，另外一个点，为保证平稳的从一个时间段调到另一个时间段，在设置时间时，如小时，需要将已经过去的分钟也转化为小时。var hour = date.getHours() + minute/60;其他的分，秒也要按此方法转化。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.clock {
width: 600px;
height: 600px;
margin: 100px auto;
background: url(images/clock.jpg) no-repeat;
position: relative;
}
.clock div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(images/hour.png) no-repeat center center;
}
#m {
background-image: url(images/minute.png);
}
#s {
background-image: url(images/second.png);
}
</style>
</head>
<body>
<div class="clock">
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
</div>
<script>
var h = document.getElementById("h");
var m = document.getElementById("m");
var s = document.getElementById("s");
function setTime(){
//获取当前时间
var date = new Date();
var second = date.getSeconds()+date.getMilliseconds()/1000;
s.style.transform = "rotate("+6*second+"deg)";
var minute = date.getMinutes()+second/60;
m.style.transform = "rotate("+6*minute+"deg)";
var hour = date.getHours() + minute/60;
h.style.transform = "rotate("+30*hour+"deg)";
}
setTime();
setInterval(setTime, 15);
</script>
</body>
</html>
时间： 2024-10-06 10:04:32