demo js源码如下,这里用到了4张图片,分别是表盘,还有三个时针,各位有用的话可以按照自己需求下载图代替。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时钟效果</title>
<style>
.clock{
width: 600px;
height: 600px;
margin: 50px auto;
background:url(images/clock.jpg) no-repeat;
position: relative;
}
.clock div{
width: 600px;
height: 600px;
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="clock" id="clock">
<div class="h"></div>
<div class="m"></div>
<div class="s"></div>
</div>
</body>
</html>
<script type="text/javascript">
var clock = document.getElementById("clock");
var h = 0, m = 0 , s =0, ms = 0;
setInterval(function() {
var date = new Date();
ms = date.getMilliseconds();
s = date.getSeconds()+ms/1000;
m = date.getMinutes()+s/60;
h = date.getHours() % 12+m/60;
clock.children[0].style.WebkitTransform = "rotate("+h*30+"deg)";
clock.children[1].style.WebkitTransform = "rotate("+m*6+"deg)";
clock.children[2].style.WebkitTransform = "rotate("+s*6+"deg)";
},50);
</script>
Comments | NOTHING