這個小案例主要是對transform的應用。 時鐘的3個表針分別是3個png圖片，通過setInterval來讓圖片轉動。時，分，秒的轉動角度分別是30，6，6度。 首先，通過new Date函數獲取當前時間，通過date.getSeconds()，date.getMinutes(),date.ge ...
這個小案例主要是對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>
