闲着无事写了一个简单的时钟效果，给新学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;
}
}
```
最终效果如图
还等什么，快来试试吧！
网友评论