指针时钟表的制作
觉得挺好玩的就做了一个，模拟指针表。就是这个样子：
额，请忽略这个配色，就是随意写的颜色，有点太ZF网站的风格了，有兴趣的可以自己设计个高大上的样式。
首先是搭建html：很简单
<body>
<div id="wrap">
<ul id="list"><li></li></ul>
<div id="cir"></div>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
</div>
</body>
分别是表盘、刻度、圆点、时针、分针、秒针
接下来就是样式，表盘wrap的样式首先是大小，圆角半径，边框线，定位
#wrap{width:200px;height:200px;margin:100px auto 0;border-radius: 50%;border:5px #FF1493 solid;position: relative;}
后边的也没什么可说的，都差不多，各位自己看就行了
#cir{width:10px;height:10px;background-color:#000000;border-radius:50%;position: absolute;top:95px;left:95px;}
#hour,#min,#sec{position: absolute;transform-origin: center bottom;}
#hour{width:8px;height:76px;background-color:#f00;top:24px;left:96px;}
#min{width:6px;height:80px;background-color:#0f0;top:20px;left:97px;}
#sec{width:2px;height:85px;background-color:#00f;top:15px;left:99px;}
主要就是设定合理的大小和让他们都归位，然后有一个需要特别说一下:
#list li{width:2px;height: 10px;position: absolute;top:0;left:100px;background-color: #000; transform-origin: center 99px;}
这个li，就是时间刻度，到时要用js动态生成加到ul里面，这里有个样式属性：transform-origin：x y；意思是：“设置旋转元素的基点位置”，我设置的是center 99px。
body #wrap li:nth-child(5n+1){height:14px;background-color: #FFA500;}
这个是设置整点的不同颜色，每隔5个旧改变一下样式。
然后就是javascript的部分了：
首先是取得我们需要操作的dom元素
window.onload=function(){
var oUl = document.getElementById("list");
var oCir = document.getElementById("cir");
var oHour = document.getElementById("hour");
var oMin = document.getElementById("min");
var oSec = document.getElementById("sec");
var oCss = document.getElementById("oCss");
var aLi = "";
var aCss = "";
这里就要动态添加事件刻度，并且让他每加一个就旋转6deg，因为360/60嘛。
for(var i=0;i<60;i++){
aLi+="<li></li>";
aCss+="#wrap li:nth-child("+(i+1)+"){transform: rotate("+i*6+"deg);}"
}
oUl.innerHTML+=aLi;
这里的oCss是<style>取得的id属性
oCss.innerHTML+=aCss;
后面这些就不多说了，获取时间时、分、秒；设定他们各自的旋转度数，然后隔一秒调用一次，完成。
function toTime(){
var myDate = new Date();
var iSec = myDate.getSeconds();
var iMin = myDate.getMinutes()+iSec/60;
var iHour = myDate.getHours()+iMin/60;
oHour.style.transform="rotate("+iHour*30+"deg)";
oMin.style.transform="rotate("+iMin*6+"deg)";
oSec.style.transform="rotate("+iSec*6+"deg)";
}
toTime();
setInterval(toTime,1000)}
