JS时钟

最新推荐文章于 2024-07-02 12:22:49 发布

chenjungang0115

最新推荐文章于 2024-07-02 12:22:49 发布

阅读量91

点赞数

原文链接：https://my.oschina.net/newSpring/blog/742209

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<style type="text/css">
html, body {
height: 100%;
background: #ffd740;
position: relative;
}
#warp{
width:240px;
height:240px;
border-radius:120px;
background:cyan;
margin:50px auto;
position:relative;
}
#clock{
width:200px;
height:200px;
border-radius:100px;
background:white;
position:absolute;
left:20px;
top:20px;
}
#bNumber{
width:100%;
height:100%;
position:relative;
}

#bNumber div{
width:190px;
height:20px;
position:absolute;
left:10px;
top:90px;
}

#bNumber span{
display:block;
width:20px;
height:20px;
}
.number{
position:absolute;
bottom:90px;
transform-origin:50% 90%;
-webkit-transform-origin:50% 90%;

}
#houre{
width:5px;
height:60px;
left:100px;
background:black;
}
#minute{
width:3px;
height:70px;
left:101px;
background:gray;
}
#second{
width:1px;
height:80px;
left:101px;
background:red;
}

</style>
</head>

   var oBnumber=document.getElementById("bNumber");
   var oDiv=oBnumber.getElementsByTagName("div");
   var oSpan=oBnumber.getElementsByTagName("span");
   for(var i=0;i<oDiv.length;i++){
   oDiv[i].style.WebkitTransform="rotate(" + i * 30 + "deg)";
   }
   for(var j=0;j<oSpan.length;j++){
   oSpan[j].style.WebkitTransform="rotate("+ j * -30 + "deg)";
   }
   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);
</script>
</body>
</html>

转载于:https://my.oschina.net/newSpring/blog/742209