CSS3实现钟表效果(基于jQuery)

效果如图所示：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3/jQuery Clock demo</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

#clock {
overflow: hidden;
position: relative;
/* width: 100%; */
height:981px;
/* margin: 20px auto 0 auto; */
background: url(images/bgblock.png);
list-style: none;
}

#sec, #min, #hour {
position: absolute;
width: 30px;
height: 600px;
top: 40%;
right: 43%;
}

#sec {
background: url(images/sechand.png);
z-index: 3;
}

#min {
background: url(images/minhand.png);
z-index: 2;
}

#hour {
background: url(images/hourhand.png);
z-index: 1;
}

p {
text-align: center;
padding: 10px 0 0 0;
}
</style>
</head>
<body>
<ul id="clock">
<li id="sec" style="transform: rotate(306deg);"></li>
<li id="hour" style="transform: rotate(428.5deg);"></li>
<li id="min" style="transform: rotate(102deg);"></li>
</ul>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval( function() {
var seconds = new Date().getSeconds();
var sdegree = seconds * 6;
var srotate = "rotate(" + sdegree + "deg)";

$("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});

}, 1000 );

setInterval( function() {
var hours = new Date().getHours();
var mins = new Date().getMinutes();
var hdegree = hours * 30 + (mins / 2);
var hrotate = "rotate(" + hdegree + "deg)";

$("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});

}, 1000 );

setInterval( function() {
var mins = new Date().getMinutes();
var mdegree = mins * 6;
var mrotate = "rotate(" + mdegree + "deg)";

$("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});

}, 1000 );

});

</script>
</body>
</html>

posted @ 2018-05-07 14:54  quitpoison  阅读(81)  评论(0)    收藏  举报