<script>
window.onload=
function(){
varhour
=document.getElementById("hour");
varminute
=document.getElementById("minute");
varsecond
=document.getElementById("second");
vars
=0,m
=0,h
=0,ms
=0;
setInterval(fn,100);
functionfn(){
//獲得時,分,秒;
vardate
=new
Date();
ms=
date.getMilliseconds();
// 得到現在的毫秒;
s=
date.getSeconds()+
ms/
1000; //現在的秒數+ms/1000是過去的秒數=10.3秒;
// console.log(s);
m=
date.getMinutes()+
s/
60; //現在的分鐘+秒數的小數=45.3分;
// console.log(m);
h=
date.getHours()%
12+
m/
60; //現在的小時(24小時制)%
12 得到12小時制+分鐘的小數=1.2小時;
// console.log(h);
// 旋轉效果;
// weblitTransform谷歌瀏覽器變化;mozlitTransform火狐瀏覽器變化;rotate旋轉;deg度;
second.style.webkitTransform=
"rotate("+s*6+"deg)";
minute.style.webkitTransform=
"rotate("+m*6+"deg)";
hour.style.webkitTransform=
"rotate("+h*30+"deg)";
}
}
</script>
時鐘效果
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.