<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.demo{ background: url(images/clock.jpg) no-repeat center center;
600px;
height: 600px;
margin: 50px auto;
position: relative;;
}
.h{
background: url(images/hour.png )no-repeat center center;
100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.m{
background: url(images/minute.png )no-repeat center center;
100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.s{
background: url(images/second.png )no-repeat center center;
100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
<script type="text/javascript">
window.onload=function(){
var hours = document.getElementById("hours");
var minutes = document.getElementById("minutes");
var second = document.getElementById("second");
var h = 0; m = 0; s = 0; ms = 0;
setInterval(function(){
// 开始定时器
var date = new Date();//得到最新的时间
ms = date.getMilliseconds();//得到最新的毫秒数
s = date.getSeconds() + ms / 1000; // 得到最新的秒数
m = date.getMinutes() + s / 60; // 得到分钟数
h = date.getHours() % 12 + m / 60; // 得到时针数
// 秒针转一圈走60次，一圈360度，所以走一次转6度。
second.style.WebkitTransform="rotate("+s*6+"deg)";
// 分针转一圈走60次，一圈360度，所以走一次转6度。
minutes.style.WebkitTransform="rotate("+m*6+"deg)"
// 时针一圈走12次，一圈360度，所以走一次转30度
hours.style.WebkitTransform="rotate("+h*30+"deg)"
},1000)
}
</script>
</head>
<body>
<div class="demo">
<div class="h" id="hours"></div>
<div class="m" id="minutes"></div>
<div class="s" id="second"></div>
</div>
</body>
</html>