閑著無事寫了一個簡單的時鐘效果，給新學css3的朋友做個參考吧。
一、布局
布局很簡單，就是一個表盤加上時、分、秒三個指針。當然為了美觀期間還可以加一個表心。代碼如下：
<body>
<div id="box">
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
<div class="cap"></div>
</div>
</body>
二、css樣式設置
代碼如下：
/*清除默認樣式*/
*{
margin:0;
padding:0;
list-style:none;
}
/*表盤樣式*/
#box{
width:300px;
height:300px;
border:1px solid #000;
border-radius:50%;
position:absolute;
left:300px; top:100px;
background:#fff;
box-shadow:1px 1px 5px #000;
}
/*表心樣式*/
#box .cap{
width:20px;
border-radius:50%;
height:20px;
background:#999;
position:absolute;
left:50%; top:50%;
margin:-10px 0 0 -10px;
}
/*時、分、秒旋轉中心*/
#box div{
transform-origin:center bottom;
}
/*時針樣式*/
#box .hour{
width:14px;
height:80px;
background:#000;
position:absolute;
left:50%;top:50%;
margin-left:-7px;
margin-top:-80px;
border-radius:50% 50% 0 0;
}
/*分針樣式*/
#box .min{
width:10px;
height:100px;
background:#282828;
position:absolute;
left:50%;top:50%;
margin-left:-5px;
margin-top:-100px;
border-radius:50% 50% 0 0;
}
/*秒針樣式*/
#box .sec{
width:4px;
height:120px;
background:#f00;
position:absolute;
left:50%;top:50%;
margin-left:-2px;
margin-top:-120px;
}
/*一般表盤刻度樣式*/
.scale{
width:4px;
height:10px;
background:#000;
position:absolute;
left:50%;
margin-left:-2px;
transform-origin:center 150px;
}
/*整時表盤刻度樣式*/
.bs{
width:6px;
height:18px;
background:#000;
position:absolute;
left:50%;
margin-left:-3px;
transform-origin:center 150px;
}
/*時間數值樣式*/
#box span em{
margin-top:20px;
width:100px;
position:absolute;
left:50%;
margin-left:-50px;
text-align:center;
font-style:normal;
}
三、js設置
當然僅有布局和css樣式，時鐘依然是個什么都沒有的圓。js設置的第一步，就是循環創建60個表盤刻度。代碼如下：
//生成刻度
var N=60;
for(var i=0; i<N; i++){
var oSpan=document.createElement('span');
//判斷當前刻度是不是整時刻度，是的話加整時刻度的class；不是的話加一般刻度的class.
if(i%5==0){
oSpan.className='bs';
//加整時刻度的數字，如果是0的話讓其等于12.
var num=i/5;
num==0?num=12:num;
oSpan.innerHTML='<em>'+num+'<\/em>';
//60秒即60個小刻度將整個圓分成60份，換成角度即360/60=6度；
//每隔6度放一個刻度.
oSpan.children[0].style.transform='rotate('+-i*6+'deg)';
}else{
oSpan.className='scale';
}
oBox.appendChild(oSpan);
oSpan.style.transform='rotate('+6*i+'deg)';
}
js設置的第二步，是設置當前時間及時針、分針、秒針的旋轉。
時針旋轉軌跡：
時針每走一個單位是5個小刻度即5*6=30度，我們知道時針不可能一下走完5個刻度，而當前時針在其一個單位中的比例和當前分針在60單位刻度中的比例是相等的。則想要讓其隨著分針的轉動慢慢旋轉，只需要加上當前分針走過的刻度占60的百分比乘上時針一個單位的角度值30即可。
分針旋轉軌跡：
同時針所走軌跡基本相同，分針在其一個單位中的比例和當前秒針在60單位刻度中的比例是相等的，則想要讓其隨著秒針的轉動慢慢旋轉，只需要加上當前秒針走過的刻度占60的百分比乘上分針一個單位的角度值6即可。
想要讓秒針也像時針和分針一樣慢慢轉動的話也可以將其換算成同毫秒的比例值，基本原理是相同的。
具體代碼如下：
function clock(){
//獲取當前時間
var oDate=new Date();
var h=oDate.getHours();
var m=oDate.getMinutes();
var s=oDate.getSeconds();
var ms=oDate.getMilliseconds();
//設置旋轉軌跡
oH.style.transform='rotate('+(h*30+m/60*30)+'deg)';
oM.style.transform='rotate('+(m*6+s/60*6)+'deg)';
oS.style.transform='rotate('+(s*6+ms/1000*6)+'deg)';
}
//解決定時器剛開始開始延遲進行情況
clock();
setInterval(clock,30);
```
現在一個簡單的表盤時鐘就做好了，如果你覺得不夠的話，還可以給表盤加上一個拖拽效果.代碼如下：
```
drag(oBox);
//拖拽
function drag(oDiv){
oDiv.onmousedown=function(ev){
var oEvent=ev || event;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){
var oEvent=ev || event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
oDiv.releaseCapture && oDiv.releaseCapture();
};
oDiv.setCapture && oDiv.setCapture();
return false;
}
}
```
最終效果如圖
還等什么，快來試試吧！
