閑著無事寫了一個簡單的時鐘效果钉稍，給新學(xué)css3的朋友做個參考吧。
一棺耍、布局
布局很簡單贡未，就是一個表盤加上時、分蒙袍、秒三個指針俊卤。當然為了美觀期間還可以加一個表心。代碼如下：
<body>
<div id="box">
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
<div class="cap"></div>
</div>
</body>
二害幅、css樣式設(shè)置
代碼如下：
/*清除默認樣式*/
*{
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;
}
/*時消恍、分、秒旋轉(zhuǎn)中心*/
#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;
}
/*時間數(shù)值樣式*/
#box span em{
margin-top:20px;
width:100px;
position:absolute;
left:50%;
margin-left:-50px;
text-align:center;
font-style:normal;
}
三以现、js設(shè)置
當然僅有布局和css樣式狠怨，時鐘依然是個什么都沒有的圓约啊。js設(shè)置的第一步，就是循環(huán)創(chuàng)建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';
//加整時刻度的數(shù)字憎蛤，如果是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設(shè)置的第二步俩檬，是設(shè)置當前時間及時針萎胰、分針、秒針的旋轉(zhuǎn)豆胸。
時針旋轉(zhuǎn)軌跡：
時針每走一個單位是5個小刻度即5*6=30度奥洼，我們知道時針不可能一下走完5個刻度巷疼，而當前時針在其一個單位中的比例和當前分針在60單位刻度中的比例是相等的晚胡。則想要讓其隨著分針的轉(zhuǎn)動慢慢旋轉(zhuǎn)，只需要加上當前分針走過的刻度占60的百分比乘上時針一個單位的角度值30即可嚼沿。
分針旋轉(zhuǎn)軌跡：
同時針所走軌跡基本相同估盘，分針在其一個單位中的比例和當前秒針在60單位刻度中的比例是相等的，則想要讓其隨著秒針的轉(zhuǎn)動慢慢旋轉(zhuǎn)骡尽，只需要加上當前秒針走過的刻度占60的百分比乘上分針一個單位的角度值6即可遣妥。
想要讓秒針也像時針和分針一樣慢慢轉(zhuǎn)動的話也可以將其換算成同毫秒的比例值，基本原理是相同的攀细。
具體代碼如下：
function clock(){
//獲取當前時間
var oDate=new Date();
var h=oDate.getHours();
var m=oDate.getMinutes();
var s=oDate.getSeconds();
var ms=oDate.getMilliseconds();
//設(shè)置旋轉(zhuǎn)軌跡
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);
```
現(xiàn)在一個簡單的表盤時鐘就做好了箫踩，如果你覺得不夠的話，還可以給表盤加上一個拖拽效果.代碼如下：
```
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;
}
}
```
最終效果如圖
還等什么谭贪，快來試試吧境钟！
