【www.bbyears.com--js教程】
代码实现
HTML
代码如下
9
10
11
12
1
2
3
4
5
6
7
8
CSS
代码如下*{
padding:0;
margin:0;
}
html, body {
height: 100%;
background: #9c9;
}
#warp{
width:230px;
height:230px;
margin:50px auto;
}
#clock{
width:200px;
height:200px;
border-radius:115px;
border:15px solid #f96;
background:white;
position:relative;
}
#number div{
width:190px;
height:20px;
position:absolute;
left:10px;
top:90px;
}
#number span{
display:block;
width:20px;
height:20px;
}
.pointer{
position:absolute;
bottom:90px;
transform-origin:50% 90%;
-webkit-transform-origin:50% 90%;
}
#houre{
width:5px;
height:60px;
left:98px;
background:black;
}
#minute{
width:3px;
height:70px;
left:99px;
background:gray;
}
#second{
width:1px;
height:80px;
left:100px;
background:red;
}
这里要注意的是number里面div的宽度给够,要不然后面用JS布局会出现问题。
JavaScript
代码如下var oNumber=document.getElementById("number");
var oDiv=oNumber.getElementsByTagName("div");
var oSpan=oNumber.getElementsByTagName("span");
for(var i=0;i
}
for(var j=0;j
}
function ColorNumber(){
var oHoure=document.getElementById("houre");
var oMinute=document.getElementById("minute");
var oSecond=document.getElementById("second");
var nowTime=new Date();
var nowHoure=nowTime.getHours();
var nowMinute=nowTime.getMinutes();
var nowSecond=nowTime.getSeconds();
var houreDeg=(nowMinute/60)*30;
var minuteDeg=(nowSecond/60)*6;
oHoure.style.WebkitTransform="rotate("+ (nowHoure * 30+houreDeg) + "deg)";
oMinute.style.WebkitTransform="rotate("+ (nowMinute * 6+ minuteDeg) + "deg)";
oSecond.style.WebkitTransform="rotate("+ (nowSecond * 6) + "deg)";
}
ColorNumber();
setInterval(ColorNumber,1000);
这里主要代码就两段,一段是布局用的,让数字旋转到相应的位置并调整方向:
代码如下for(var i=0;i
}
for(var j=0;j
}
另一段是计算指针的角度,其中最重要的是在不满一小时或不满一分钟时,时针或分针应该转多少度:
代码如下 var houreDeg=(nowMinute/60)*30;var minuteDeg=(nowSecond/60)*6;
It"s done.是不是很简单.....