又一款js時鐘!transform實現時鐘效果
編輯：關於JavaScript
又來一個時鐘效果了，這個的實現不需要canvas，都是div、ul、li畫出的，好玩有真實。
哈哈~
需要的js才能實現到走動這個效果，但js的內容不多，也不難。
主要是一個css裡transform的使用的思路，transform裡有很多變幻屬性，而普通的時鐘
在我心中就是個圓圓的東西，那麼是不是可以旋轉這個屬性（rotate）實現了，它的刻度
使用旋轉且把旋轉點設置在圓心，那不就可以繞著圓心轉了嗎，而時針它們的底部不是和
圓心接觸的嗎，那麼設置時針的底部為旋轉點不就OK了，大概的說了說思路。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style id="css">
#clock{
width: 200px;
height: 200px;
border: 2px solid #000;
border-radius: 50%;
margin: 100px auto 0;
position: relative;
}
#clock ul{
width: 200px;
height: 200px;
position: relative;
list-style: none;
padding:0;
margin: 0;
}
#clock ul li{
width: 2px;
height: 10px;
background: #000;
transform-origin: center 100px;
position: absolute;
top: 0;
left: 50%;
}
#clock ul li:nth-of-type(5n+1){
height: 20px;
}
#hour{
height: 40px;
width: 4px;
background: #00fefe;
position: absolute;
top: 60px;
left: 99px;
transform-origin:center bottom;
}
#min{
height: 60px;
width: 3px;
background: #001afe;
position: absolute;
top: 40px;
left: 99px;
transform-origin: center bottom;
transform: rotate(15deg);
}
#sec{
height: 70px;
width: 2px;
background: #000;
position: absolute;
top: 30px;
left: 99px;
transform-origin:center bottom;
}
#dot{
width: 10px;
height: 10px;
position: absolute;
left: 95px;
top: 95px;
background: #aaa;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="clock">
<ul></ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div id="dot"></div>
</div>
<script>
var oCss=document.getElementById("css");
var oClock=document.getElementById("clock");
var oUl=oClock.getElementsByTagName("ul")[0];
var oHour=document.getElementById("hour");
var oMin=document.getElementById("min");
var oSec=document.getElementById("sec");
var strLi="";
var strCss="";
for(var i=0;i<60;i++){
strLi+="<li></li>";
}
oUl.innerHTML=strLi;
for(var i=0;i<60;i++){
strCss+='#clock ul li:nth-of-type('+(i+1)+'){transform:rotate('+i*6+'deg);}';
}
oCss.innerHTML+=strCss;
time();
setInterval(time,1000);
function time(){
var date=new Date();
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
oHour.style.transform="rotate("+(h+m/60)*30+"deg)";
oMin.style.transform="rotate("+(m+s/60)*6+"deg)";
oSec.style.transform="rotate("+s*6+"deg)";
}
</script>
</body>
</html>
使用標簽畫圖最主要的是定位，因為這樣我們就可以把弄到形狀的盒子放到你所想要的位置，內部css樣式表是可以使用獲取元素的方式獲取的，這樣就可以 使用innerHTML為其添加樣式，且可以循環添加，還有因為刻度太多所以使用循環添加，這樣省時省力，至於剩下的就是定時器了，給定好1秒的時間，每1 秒執行一次函數，這樣它就是動起來了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
小編推薦
熱門推薦