制作表盤
首先要明確以蕴，表盤一周是360°并有60個(gè)小刻度竟块。也就是每個(gè)刻度從0°（12點(diǎn)位置）開(kāi)始遞加6°督禽。拿其中5個(gè)刻度為例讲婚，代碼如下：
html代碼布局：
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
css樣式表：
/* 清除默認(rèn)樣式 */
*{margin: 0;padding: 0}
li{list-style: none}
/* 將表盤設(shè)置成半徑為100px的原型，并為其加上邊框 */
#ul1{
width: 200px;height: 200px;
border: 1px solid #000;
border-radius: 50%;
position: relative;
}
/* 設(shè)置每個(gè)刻度的寬高待德，這里用定位將他們都定在表盤12點(diǎn)（0°）的位置君丁，也就是ul1的寬度的一半。
并設(shè)置它們的選擇奇點(diǎn)（ -webkit-transform-origin: 0 100px）将宪，圍繞著ul1的中心分布绘闷，
也就是ul1高度的一半 */
li{
width: 2px;height: 6px;
background: black;
position:absolute;
left:100px;top:0;
-webkit-transform-origin: 0 100px;
}
/* 這里利用css3的子元素選擇器（因?yàn)楸救藨校幌朊鹀lass）较坛，設(shè)置5個(gè)刻度的位置 */
li:nth-child(1){ -webkit-transform: rotate(0deg);}
li:nth-child(2){ -webkit-transform: rotate(6deg);}
li:nth-child(3){ -webkit-transform: rotate(12deg);}
li:nth-child(4){ -webkit-transform: rotate(18deg);}
li:nth-child(5){ -webkit-transform: rotate(24deg);}
效果如下：
這里就簡(jiǎn)單的將5個(gè)刻度設(shè)置好了印蔗，是不是很簡(jiǎn)單呢！
接下來(lái)（因?yàn)楸救藨谐笄冢幌胧謩?dòng)在html中創(chuàng)建60個(gè)li）华嘹，所以咱們就用js代碼動(dòng)態(tài)創(chuàng)建。
/* 先獲取表盤ul1 */
var oUl = document.getElementById('ul1');
/* 因?yàn)槭?0個(gè)刻度嘛法竞，我們就創(chuàng)建60個(gè)li耙厚，并設(shè)置它們的旋轉(zhuǎn)角度 */
for (var i=0;i<60;i++){
var oLi = document.createElement('li');
/* 因?yàn)閕是從0~60，而每個(gè)刻度的旋轉(zhuǎn)角度360°÷60=6°岔霸，所以每個(gè)刻度的旋轉(zhuǎn)角度就是i*6° */
oLi.style.webkitTransform = 'rotate('+ i*6 +'deg)';
oUl.appendChild(oLi);
}
另：是不是每5個(gè)就有一個(gè)與眾不同的li薛躬。所以這里就在css中設(shè)置每隔5n個(gè)設(shè)置一下，代碼如下：
li:nth-of-type(5n){ height: 14px;width: 5px;}
創(chuàng)建好的效果如下：
時(shí)呆细、分泛豪、秒針"動(dòng)起來(lái)"
首先我們先在頁(yè)面上弄時(shí)針(hour)、分鐘(minutes)、秒針(sec)诡曙、原點(diǎn)(cap,一個(gè)小帽子)臀叙，當(dāng)然了還有我們上面所創(chuàng)建的表盤(dial)
html代碼布局：
<div id="box">
<div id="time">
<div class="hour"></div>
<div class="minutes"></div>
<div class="sec"></div>
<div class="cap"></div>
</div>
<ul id="dial"></ul>
</div>
css樣式：
/* 清除默認(rèn)樣式 */
*{margin: 0;padding: 0}
li{list-style: none}
/* 設(shè)置時(shí)鐘的大小(寬高)及位置*/
#box{
width: 300px; height: 300px;
position: absolute;
left: 100px; top: 100px;
}
/* 設(shè)置主區(qū)域(時(shí)分秒針) 大小(寬高)及位置**/
#time{
width: 300px; height: 300px;
position: absolute;
/* 這里因?yàn)槠涓讣?jí)有定位所以設(shè)置位置就行，讓它在恰當(dāng)位置 */
left: 0; top: 0;
/* 這里提升層級(jí)是防止表盤設(shè)置背景圖圖覆蓋顯示區(qū) */
z-index: 999;
}
/* 設(shè)置原點(diǎn)(小帽子)大小及位置 */
.cap{
width: 12px; height: 12px;
border-radius: 50%;
/* 這里是設(shè)置小帽子的顏色价卤，這里用到的是css3背景色的漸變 */
background: -webkit-radial-gradient(circle,#eee,#000);
position: absolute;
left: 50%; top: 50%;
/* 這里將小帽子的位置定在中心位置 */
margin: -6px 0 0 -6px;
}
/* 時(shí)針配置 */
.hour{
width: 12px;height: 80px;
background: black;
/* 這里設(shè)置時(shí)針上端為尖下端為平(具體參考border-radius的使用方法) */
border-radius: 50% 50% 0 0;
position: absolute;
left: 50%; top: 50%;
/* 這里時(shí)針定在恰當(dāng)位置劝萤，因?yàn)槠渥笥揖又校撞颗c小帽子結(jié)合 */
margin: -80px 0 0 -6px;
/* 設(shè)置時(shí)針的底部中心為旋轉(zhuǎn)奇點(diǎn)(運(yùn)動(dòng)時(shí)候圍繞其旋轉(zhuǎn)) */
-webkit-transform-origin:center bottom;
}
/* 分針配置 */
.minutes{
width: 10px;height: 100px;
background: black;
border-radius: 50% 50% 0 0;
position: absolute;
left: 50%; top: 50%;
margin: -100px 0 0 -5px;
-webkit-transform-origin:center bottom;
}
/* 秒針配置 */
.sec{
width: 8px;height: 120px;
background: red;
border-radius: 50% 50% 0 0;
position: absolute;
left: 50%; top: 50%;
margin: -120px 0 0 -4px;
-webkit-transform-origin:center bottom;
}
/* 下面為表盤的配置慎璧，上面已說(shuō)明床嫌，這里就不絮叨了 */
#dial{
width: 300px;height: 300px;
position: absolute;
left: 0; top: 0;
border: 1px solid #000;
border-radius: 50%;
background: rgba(77,46,238,.5) no-repeat 0 0;
background-size: cover;
}
#dial li{
width: 5px;height: 8px;
background: black;
position:absolute;
left:150px;top:0;
-webkit-transform-origin: 0 150px;
}
#dial li:nth-of-type(5n){height: 14px;width: 6px;}
下面開(kāi)始控制時(shí)間顯示
思路：
-利用new Date()獲取到時(shí)間，并獲取其中的時(shí)胸私、分厌处、秒數(shù)值。
-根據(jù)數(shù)值利用js設(shè)置其旋轉(zhuǎn)角度即可岁疼。
js實(shí)現(xiàn)代碼：
/* 元素獲取阔涉，獲取html中時(shí)針、分針捷绒、秒針標(biāo)簽 */
var oH = document.querySelector('#time .hour');
var oM = document.querySelector('#time .minutes');
var oS = document.querySelector('#time .sec');
var timer = null;
/* 定義一個(gè)time函數(shù)瑰排，方便調(diào)用 */
function time(){
/* 獲取時(shí)間對(duì)象 */
var oDate = new Date();
/* 獲取時(shí)間對(duì)象里的“秒” */
var s = oDate.getSeconds();
/* 獲取時(shí)間對(duì)象里的“分”，這里+s/60的意思是：當(dāng)秒針運(yùn)動(dòng)時(shí)暖侨，分針也會(huì)把秒針的值計(jì)算到旋轉(zhuǎn)角度內(nèi)椭住，
因?yàn)橐环昼姷纫?0秒，所以除的60 */
var m = oDate.getMinutes() + s/60;
/* 獲取時(shí)間對(duì)象里的“時(shí)”字逗，這里oDate.getHours()%12的意思是：
表盤上只有12個(gè)時(shí)辰而獲取的是24小時(shí)制京郑，所以這里就需要用“取膜(%)”進(jìn)行轉(zhuǎn)化；這里的+ m/60的意思是：
其實(shí)同上面分針加 s/60是一個(gè)原因葫掉。即當(dāng)分針運(yùn)動(dòng)時(shí)傻挂，時(shí)針針也會(huì)把分針的值計(jì)算到旋轉(zhuǎn)角度內(nèi)，
因?yàn)橐恍r(shí)等于60分挖息，所以除的60。***這里寫就很好的避免了兽肤，時(shí)針由一個(gè)刻度“跳”到另一個(gè)刻度套腹。*/
var h = oDate.getHours()%12 + m/60;
/* 這里將獲取到的數(shù)值用js實(shí)現(xiàn)響應(yīng)的角度選擇即可 */
/* 360/12的意思是，表盤一圈360°资铡，有12個(gè)時(shí)辰电禀，所以每個(gè)時(shí)辰跨度為30° */
oH.style.webkitTransform = 'rotate('+ h*(360/12) +'deg)';
/* 360/60的意思是，表盤一圈360°笤休，有60分尖飞，所以每分鐘跨度為6° */
oM.style.webkitTransform = 'rotate('+ m*(360/60) +'deg)';
/* 360/60的意思是，表盤一圈360°，有60秒政基，所以每秒鐘跨度為6° */
oS.style.webkitTransform = 'rotate('+ s*(360/60) +'deg)';
}
/* 這里直接執(zhí)行一次的目的是：防止頁(yè)面加載后會(huì)“跳”一下 */
time();
/* 下面的代碼是制作表盤的過(guò)程贞铣，上面有描述這里就不多說(shuō)了 */
var oUl = document.getElementById('dial');
for (var i=0;i<60;i++){
var oLi = document.createElement('li');
oLi.style.webkitTransform = 'rotate('+ i*6 +'deg)';
oUl.appendChild(oLi);
}
/* 這里需要每隔一段時(shí)間來(lái)“驅(qū)動(dòng)”時(shí)鐘走 */
timer = setInterval(function(){ time(); },30);
通過(guò)上面的代碼我們就將一個(gè)時(shí)針制作完成了。
請(qǐng)看：
ps:雖然頁(yè)面有點(diǎn)丑沮明，但我們注重的是內(nèi)涵是不辕坝？？荐健？酱畅？
