使用JS使时钟运动
DOM运动，主要操作css3中transform：rotate（）；
计时器setInterval（），setTimeout()，如何防止时钟偷停;
时钟的时针、分针、秒针的运动的度数之比；
<!doctype html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<meta name="decription" content="css3 transform
rotate()
旋转，制造时钟运动效果">
<title>Clock</title>
<style>
#clock
{
width:500px;
height:500px;
border:30px
solid black;
border-radius: 50px;
position:
relative;
}
#clock div
{
position:
absolute;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50%
0;
transform-origin: 50% 0;
}
#hour-hand
{
width:8%;
height:24%;
background-color:
red;
left:50%;
margin-left: -4%;
top:50%;
margin-top:
-5.5%;
box-shadow: 10px 10px
#ccc;
}
#minute-hand
{
width:10%;
height:34%;
background-color:
green;
left:50%;
margin-left: -5%;
top:50%;
margin-top:
-5.5%;
}
#clock
#second-hand
{
width:5%;
height:50%;
background-color:
blue;
background-size:
contain;
left:50%;
margin-left:-2.5%;
top:35%;
box-shadow:
5px 5px #ccc;
-webkit-transform-origin: 50% 45px;
-moz-transform-origin:
50% 45px;
transform-origin: 50%
45px;
}
</style>
<script
src="js/jquery-1.10.1.min.js"></script>
<script
type="text/javascript">
window.onload = function()
{
var oClock
= document.getElementById("clock");
var oHourHand =
document.getElementById("hour-hand");
var oMinuteHand
=document.getElementById("minute-hand");
var oSecendHand =
document.getElementById("second-hand");
var oDate = new Date(); //初始化时钟，获取系统时间，赋值给时、分、秒针
var nowHours =
oDate.getHours();
var nowMinutes = oDate.getMinutes();
var nowSecond =
oDate.getSeconds();
nowHours %=12;
var hoursDeg =
30*nowHours+nowMinutes/2+nowSecond/120+180;
var minutesDeg =
6*nowMinutes+nowSecond/10+180;
var secondsDeg =
6*nowSecond+180;
oSecendHand.style.webkitTransform="rotate("+secondsDeg+"deg)";
oMinuteHand.style.webkitTransform="rotate("+minutesDeg+"deg)"; //此处用到weikitTransform,请使用webkit内核浏览器进行查看
oHourHand.style.webkitTransform = "rotate("+hoursDeg+"deg)"; //可使用jQuery替代，用法自行查阅。
var startTime = oDate.getTime();
var count=0;
function
fixed() //防止该事件被阻塞，时钟不准
{
count ++;
var offset = new
Date().getTime()- (startTime + count*1000);
var nextTime = 1000 -
offset;
if (nextTime<0) {nextTime =
0;};
setTimeout(fixed,nextTime);
secondsDeg
+=6; //每秒时分秒针所走的距离
if (secondsDeg%360==0)
{
secondsDeg=0;
};
minutesDeg +=1/10;
if (minutesDeg>=360)
{
minutesDeg%=360;
};
hoursDeg +=1/120;
if (hoursDeg>=360)
{
hoursDeg%=360;
};
oSecendHand.style.webkitTransform="rotate("+secondsDeg+"deg)";
oMinuteHand.style.webkitTransform="rotate("+minutesDeg+"deg)";
oHourHand.style.webkitTransform
= "rotate("+hoursDeg+"deg)";
console.log(new Date().getTime() - (startTime
+ count * 1000));
}
setTimeout(fixed,1000)
}
</script>
</head>
<body>
<div
id="clock">
<div
id="hour-hand">
</div>
<div
id="minute-hand">
</div>
<div
id="second-hand">
</div>
</div>
</body>
</html>
原文地址：http://www.cnblogs.com/scavengers/p/3764998.html
