</div>
<div id=”hour” class=”needle”>
<div id=”hour_needle”>
</div>
</div>
</div>
代码中各个DIV的含义就不解释了，相信大家都看得懂。HTML还是挺简单的，起作用的还得看CSS。
相关CSS代码：
<style type=”text/css”>
#clock{
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 100px;
position:relative;
margin:0 auto;
background-color:#eee;
}
#dot{
border-radius:2px;
width: 8px;
height: 8px;
position:absolute;
top: 0;
bottom: 0;
margin: auto;
left: 0;
right: 0;
background: black;
}
.needle
{
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin:50% 100%;
}
#second{
position:relative;
z-index:5;
height: 80px;
width: 1px;
margin: 20px auto;
}
#second_needle{
height: 100%;
width: 100%;
position: relative;
background: green;
}
#minute{
z-index:4;
height: 60px;
width: 4px;
position: absolute;
top: 40px;
left: 0px;
right: 0px;
margin: auto;
}
#minute_needle{
height: 100%;
width: 100%;
background: blue;
}
#hour{
z-index:3;
height: 40px;
width: 8px;
position: absolute;
top: 60px;
left: 0px;
right: 0px;
margin: auto;
}
#hour_needle{
height: 100%;
width: 100%;
background: red;
}
</style>
这里说明下几个关键的CSS属性：#clock 里面的块元素的 position:absolute;然后再用top; bottom; margin; left; right; 才能准确定位，各个指钟的旋转原点为底部的中点：transform-origin:50% 100%;
3.页面的Javascript的实现
最为关键的是JS代码了：
<script type=”text/javascript”>
//初始化各指钟的位置
window.onload = function(){
var date = new Date(),
second = date.getSeconds(),
minute = date.getMinutes(),
minuteDeg,
hour = date.getHours(),
hourDeg;
var secondrotate = ‘rotate(‘+second*6+’deg)’;
var scss = ‘-moz-transform:’ + secondrotate + ‘;-o-transform:’ + secondrotate + ‘;-ms-transform:’ + secondrotate;
//对?于úwebkit的?浏ˉ览à器÷,要a这a样ù定¨义?
document.getElementById(‘second’).style.cssText = scss;
document.getElementById(‘second’).style.webkitTransform = secondrotate;
minuteDeg = minute*6 + second*6/60;
var minuterotate = ‘rotate(‘+minuteDeg+’deg)’;
var minutecss = ‘-moz-transform:’ + minuterotate + ‘;-o-transform:’ + minuterotate + ‘;-ms-transform:’ + minuterotate ;
