JQuery实现时钟功能
程序员文章站
2022-05-08 17:05:11
...
JQuery实现时钟功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js时钟效果</title>
<style>
.clock{
width: 600px;
height: 600px;
margin: 50px auto;
background:url(dial.jpg) no-repeat;
position: relative;
}
.clock div{
width: 600px;
height: 600px;
position: absolute;
top: 0;
left: 0;
}
.h{
background: url(wise.png)no-repeat center center;
}
.m{
background: url(points.png)no-repeat center center;
}
.s{
background: url(hand.png)no-repeat center center;
}
</style>
</head>
<body>
<div class="clock" id="clo">
<div class="h"></div>
<div class="m"></div>
<div class="s"></div>
</div>
</body>
</html>
<script type="text/javascript">
var clock = document.getElementById("clo");
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>
效果图