模拟简单的时钟

注释：不兼容ie8以及以下浏览器

针对于一段javascript效果，有很多种实现路径，庸医觉得要是思路，思路通了，一切都通了，例如下面的模拟时钟

简易效果图：

div代码：

<div class="mainclock" id="mainclock">
<div class="yuan"></div>
<div class="kedupan">
<div class="kedu">
<div class="kedupan_i"></div>
</div>
</div>
<div class="numpan">
<div class="num">
<div class="num_i"></div>
</div>
</div>
<div class="zhizhen" id="miao">
<div class="miao1"></div>
<div class="miao2"></div>
</div>
<div class="zhizhen" id="fen">
<div class="fen1"></div>
<div class="fen2"></div>
</div>
<div class="zhizhen" id="shi">
<div class="shi1"></div>
<div class="shi2"></div>
</div>
</div>

css代码：

.mainclock{width:400px;height:400px;border:1px solid black;border-radius:50%;margin:100px auto; position:relative;}.yuan{width:20px;height:20px; border-radius: 50%;background-color:black; position: absolute;;left:50%;top:50%;margin-left:-10px; margin-top:-10px;}.kedu,.num,.zhizhen {width:2px;height:10px;position: absolute;;left:50%;top:50%;margin-left:-1px; margin-top:-5px;transform:rotate(0deg);}.kedupan .kedupan_i{width:1px ; height:10px; background-color:black; margin-top:-180px;}.numpan .num_i{width:40px ; height:10px;margin-top:-180px;position:absolute; left:1px; bottom:160px; margin-left:-20px; text-align:center; font-size:30px;}.kedu1{transform:rotate(30deg);}.miao1{width:10px;height:60px;background:red; border-radius: 5px;margin-top:-40px;margin-left:-4px;}.miao2{border-left:5px solid transparent; border-right:5px solid transparent;border-bottom:40px solid red;position:absolute;left:-4px;bottom:50px;}.fen1{width:10px;height:50px;background:green; border-radius: 5px;margin-top:-30px;margin-left:-4px;}.fen2{border-left:5px solid transparent; border-right:5px solid transparent;border-bottom:40px solid green;position:absolute;left:-4px;bottom:40px;}.shi1{width:10px;height:40px;background:black; border-radius: 5px;margin-top:-20px;margin-left:-4px;}.shi2{border-left:5px solid transparent; border-right:5px solid transparent;border-bottom:40px solid black;position:absolute;left:-4px;bottom:30px;}

js代码：

window.οnlοad=function(){
setkedu('mainclock','.kedupan',60);
setkedu('mainclock','.numpan',12);
setfen('mainclock','.kedu',60);
setnum('mainclock','.num',12);
set();
setInterval(set,1000);
}
//模拟jquery获取元素
function getid(id){
if(id.substr(0,1)=='.'){
return document.getElementsByClassName(id.substr(1));
}
return document.getElementById(id);
}
function getclass(id,classname){
return getid(id).getElementsByClassName(classname.substr(1));
}

//生成60个kedu
function setkedu(id,classname,n){
var html=[];
for(var i=0;i<n;i++){
var _html=getclass(id,classname)[0].innerHTML;
html.push(_html);
}
getclass(id,classname)[0].innerHTML=html.join(" ");

}
//为分针设置旋转度数
function setfen(id,classname,k){
var html=getclass(id,classname);
for(var i=0;i<k;i++){
var _deg='rotate('+360/k*i+'deg)';
html[i].style.transform=_deg;
if(i%5==0){
html[i].getElementsByClassName('kedupan_i')[0].style.width='4px';
}
}
}
//为数字设置旋转度数
function setnum(id,classname,k){
var html=getclass(id,classname);
for(var i=0;i<k;i++){
var _deg='rotate('+360/k*i+'deg)';
html[i].style.transform=_deg;
html[i].getElementsByClassName('num_i')[0].innerHTML=1+(11+i)%12;
if(i>3 && i<10){
html[i].getElementsByClassName('num_i')[0].style.transform='rotate(180deg)'
}
}
}
//获取时间，设置时分秒指针转动
function set(){


var date=new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
console.log(minute);
var setsecond='rotate('+6*second+'deg)';
var setminute='rotate('+6*minute+0.1*second+'deg)';
var setHour='rotate('+30*hour+0.5*minute+'deg)';
getid('miao').style.transform=setsecond;//旋转秒针 
getid('fen').style.transform=setminute;//旋转分针 
getid('shi').style.transform=setHour;//旋转时针 
}
</script>