思路:首先使用定位功能把时钟、时针、分针、秒针聚合,然后使用日期函数得到当前时间的时分秒和毫秒,然后使用css3属性transform和旋转函数rotate()改变角度,达到使针转动的目的。
关键知识:position定位,日期函数Date()获得当前时分秒的使用,transform属性
具体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style>
.box{
width: 600px;
height: 600px;
margin: 40px auto;
position: relative;
background: url(images/clock.jpg) no-repeat;
}
.box div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.h {
background: url(images/hour.png) no-repeat center center;/*居中显示不重铺*/
}
.m {
background: url(images/minute.png) no-repeat center center;
}
.s {
background: url(images/second.png) no-repeat center center;
}
</style>
</head>
<body>
<div class="box">
<div class="h" id="hour"></div>
<div class="m" id="min"></div>
<div class="s" id="second"></div>
</div>
</body>
<script type="text/javascript">
var hour = document.getElementById('hour');
var min = document.getElementById('min');
var second = document.getElementById('second');
//设置定时器
setInterval(clock,1000);
//如果改为setInterval(clock,10)可使秒针以滑动形式转动
function clock(){
var date = new Date();
var ms = date.getMilliseconds();//得到当前毫秒数
var s = date.getSeconds()+ms/1000;//得到当前秒,可能是小数
var m = date.getMinutes()+s/60;//得到当前分
var h = date.getHours()%12+m/60;//得到当前小时,注意时钟表盘是12进制
// console.log(h,m,s,ms);
//使用css3属性transform旋转角度
second.style.WebkitTransform = 'rotate('+s*6+'deg)';//秒针一圈走60次,每秒6度
second.style.MozTransfor = 'rotate('+s*6+'deg)';
min.style.WebkitTransform = 'rotate('+m*6+'deg)';//分钟一圈走60次,每分钟6度
hour.style.WebkitTransform = 'rotate('+h*30+'deg)';//时针一圈走12次,每小时30度
}
</script>
</html>
具体效果可见:时钟效果