2 D時計効果を実現
2924 ワード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style id="css">
#wrap{
width:200px;height:200px;border:2px solid #000;margin:100px auto;border-radius:50%;position:relative;
}
#wrap ul{
margin:0;padding:0;height:200px;position:relative;list-style:none;
}
#wrap ul li{
width:2px;height:6px;background:#000;position:absolute;left:99px; top:0;-webkit-transform-origin: center 100px ;
}
#wrap ul li:nth-of-type(5n+1){height:12px;}
#hour{width:6px;height:45px;background:#000;position:absolute;left:97px;top:55px; -webkit-transform-origin:bottom;}
#min{width:4px;height:65px;background:#999;position:absolute;left:98px;top:35px;-webkit-transform-origin:bottom;}
#sec{width:2px;height:80px;background:red;position:absolute;left:99px;top:20px;-webkit-transform-origin:bottom;}
.ico{
width:20px;height:20px;background:#000;position:absolute;left:90px;top:90px;border-radius:50%;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div class="ico"></div>
</div>
<script>
var oList=document.getElementById('list');
var oCss=document.getElementById('css');
var oHour=document.getElementById('hour');
var oMin=document.getElementById('min');
var oSec=document.getElementById('sec');
var aLi="";
var sCss="";
for(var i=0;i<60;i++)
{
sCss+="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform:rotate("+i*6+"deg);}";
aLi+="<li></li>"
}
oList.innerHTML=aLi;
oCss.innerHTML+=sCss;
toTime();
setInterval(toTime, 1000);
function toTime(){
var oDate=new Date();
var iSec=oDate.getSeconds();
var iMin=oDate.getMinutes()+iSec/60;
var iHour=oDate.getHours()+iMin/60;
oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";
oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";
oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";
}
</script>
</body>
</html>