制作表盘
首先要明确，表盘一周是360°并有60个小刻度。也就是每个刻度从0°（12点位置）开始递加6°。拿其中5个刻度为例，代码如下：
html代码布局：
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
css样式表：
/* 清除默认样式 */
*{margin: 0;padding: 0}
li{list-style: none}
/* 将表盘设置成半径为100px的原型，并为其加上边框 */
#ul1{
width: 200px;height: 200px;
border: 1px solid #000;
border-radius: 50%;
position: relative;
}
/* 设置每个刻度的宽高，这里用定位将他们都定在表盘12点（0°）的位置，也就是ul1的宽度的一半。
并设置它们的选择奇点（ -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的子元素选择器（因为本人懒，不想命名class），设置5个刻度的位置 */
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);}
效果如下：
这里就简单的将5个刻度设置好了，是不是很简单呢！
接下来（因为本人懒，不想手动在html中创建60个li），所以咱们就用js代码动态创建。
/* 先获取表盘ul1 */
var oUl = document.getElementById('ul1');
/* 因为是60个刻度嘛，我们就创建60个li，并设置它们的旋转角度 */
for (var i=0;i<60;i++){
var oLi = document.createElement('li');
/* 因为i是从0~60，而每个刻度的旋转角度360°÷60=6°，所以每个刻度的旋转角度就是i*6° */
oLi.style.webkitTransform = 'rotate('+ i*6 +'deg)';
oUl.appendChild(oLi);
}
另：是不是每5个就有一个与众不同的li。所以这里就在css中设置每隔5n个设置一下，代码如下：
li:nth-of-type(5n){ height: 14px;width: 5px;}
创建好的效果如下：
时、分、秒针"动起来"
首先我们先在页面上弄时针(hour)、分钟(minutes)、秒针(sec)、原点(cap,一个小帽子)，当然了还有我们上面所创建的表盘(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样式：
/* 清除默认样式 */
*{margin: 0;padding: 0}
li{list-style: none}
/* 设置时钟的大小(宽高)及位置*/
#box{
width: 300px; height: 300px;
position: absolute;
left: 100px; top: 100px;
}
/* 设置主区域(时分秒针) 大小(宽高)及位置**/
#time{
width: 300px; height: 300px;
position: absolute;
/* 这里因为其父级有定位所以设置位置就行，让它在恰当位置 */
left: 0; top: 0;
/* 这里提升层级是防止表盘设置背景图图覆盖显示区 */
z-index: 999;
}
/* 设置原点(小帽子)大小及位置 */
.cap{
width: 12px; height: 12px;
border-radius: 50%;
/* 这里是设置小帽子的颜色，这里用到的是css3背景色的渐变 */
background: -webkit-radial-gradient(circle,#eee,#000);
position: absolute;
left: 50%; top: 50%;
/* 这里将小帽子的位置定在中心位置 */
margin: -6px 0 0 -6px;
}
/* 时针配置 */
.hour{
width: 12px;height: 80px;
background: black;
/* 这里设置时针上端为尖下端为平(具体参考border-radius的使用方法) */
border-radius: 50% 50% 0 0;
position: absolute;
left: 50%; top: 50%;
/* 这里时针定在恰当位置，因为其左右居中，底部与小帽子结合 */
margin: -80px 0 0 -6px;
/* 设置时针的底部中心为旋转奇点(运动时候围绕其旋转) */
-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;
}
/* 下面为表盘的配置，上面已说明，这里就不絮叨了 */
#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;}
下面开始控制时间显示
思路：
-利用new Date()获取到时间，并获取其中的时、分、秒数值。
-根据数值利用js设置其旋转角度即可。
js实现代码：
/* 元素获取，获取html中时针、分针、秒针标签 */
var oH = document.querySelector('#time .hour');
var oM = document.querySelector('#time .minutes');
var oS = document.querySelector('#time .sec');
var timer = null;
/* 定义一个time函数，方便调用 */
function time(){
/* 获取时间对象 */
var oDate = new Date();
/* 获取时间对象里的“秒” */
var s = oDate.getSeconds();
/* 获取时间对象里的“分”，这里+s/60的意思是：当秒针运动时，分针也会把秒针的值计算到旋转角度内，
因为一分钟等一60秒，所以除的60 */
var m = oDate.getMinutes() + s/60;
/* 获取时间对象里的“时”，这里oDate.getHours()%12的意思是：
表盘上只有12个时辰而获取的是24小时制，所以这里就需要用“取膜(%)”进行转化；这里的+ m/60的意思是：
其实同上面分针加 s/60是一个原因。即当分针运动时，时针针也会把分针的值计算到旋转角度内，
因为一小时等于60分，所以除的60。***这里写就很好的避免了，时针由一个刻度“跳”到另一个刻度。*/
var h = oDate.getHours()%12 + m/60;
/* 这里将获取到的数值用js实现响应的角度选择即可 */
/* 360/12的意思是，表盘一圈360°，有12个时辰，所以每个时辰跨度为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)';
}
/* 这里直接执行一次的目的是：防止页面加载后会“跳”一下 */
time();
/* 下面的代码是制作表盘的过程，上面有描述这里就不多说了 */
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);
}
/* 这里需要每隔一段时间来“驱动”时钟走 */
timer = setInterval(function(){ time(); },30);
通过上面的代码我们就将一个时针制作完成了。
请看：
ps:虽然页面有点丑，但我们注重的是内涵是不？？？？
网友评论