钟表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时钟</title>
</head>
<style>
*{
margin: 0;
padding: 0
}
.clockBox{
width: 200px;
height: 200px;
border:3px solid #000;
border-radius: 50%;
margin: 100px auto;
position: relative;
}
.clockIco{
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
z-index: 1
}
.clockIco span{
width: 2px;
height: 6px;
background: #666;
position: absolute;
left: 99px;
top: 0px;
-webkit-transform-origin:0 100px;
-moz-transform-origin:0 100px;
-o-transform-origin:0 100px;
transform-origin:0 100px;
}
.clockIco span:nth-child(5n+1){
background: #000;
width: 3px;
}
.clockMove{
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
z-index: 5;
}
.clockMove .cSpeck{
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
margin: -5px 0 0 -5px;
z-index: 10;
}
.clockMove .iSec{
width: 2px;
height: 80px;
background: #aaa;
position: absolute;
left: 4px;
bottom: 5px;
z-index: 7;
-webkit-transform-origin:bottom;
-moz-transform-origin:bottom;
-o-transform-origin:bottom;
-ms-transform-origin:bottom;
transform-origin:bottom;
}
.clockMove .iMinu{
width: 3px;
height: 70px;
background: #333;
position: absolute;
bottom: 5px;
left: 3px;
z-index: 6;
-webkit-transform-origin:bottom;
-moz-transform-origin:bottom;
-o-transform-origin:bottom;
-ms-transform-origin:bottom;
transform-origin:bottom;
}
.clockMove .iHour{
width: 6px;
height: 50px;
background: #000;
position: absolute;
left:2px;
bottom: 5px;;
z-index: 5;
-webkit-transform-origin:bottom;
-moz-transform-origin:bottom;
-o-transform-origin:bottom;
-ms-transform-origin:bottom;
transform-origin:bottom;
}
</style>
<script type="text/javascript" src="http://static.cheduoshao.com/js/jquery.1.8.2.min.js"></script>
<script>
$(function()
{
addIsec();
function addIsec()
{
var str = '';
for(var i=0; i<60; i++)
{
str+="<span style='-webkit-transform:rotate("+6*i+"deg);-moz-transform:rotate("+6*i+"deg);-o-transform:rotate("+6*i+"deg);-ms-transform:rotate("+6*i+"deg);transform:rotate("+6*i+"deg)'></span>"
}
$(".clockIco").html(str);
}
timeMove();
setInterval(function()
{
timeMove()
},1000)
function timeMove()
{
var oDate = new Date();
var iSec = oDate.getSeconds();
var iMin = oDate.getMinutes()+iSec/60;
var iHour =(oDate.getHours()%12)+iMin/60;
$(".iHour").css(
{
'-webkit-transform':'rotate('+(iHour*360/12)+'deg)',
'-moz-transform':'rotate('+(iHour*360/12)+'deg)',
'-o-transform':'rotate('+(iHour*360/12)+'deg)',
'-ms-transform':'rotate('+(iHour*360/12)+'deg)',
'transform':'rotate('+(iHour*360/12)+'deg)'
})
$(".iMinu").css(
{
'-webkit-transform':'rotate('+(iMin*360/60)+'deg)',
'-moz-transform':'rotate('+(iMin*360/60)+'deg)',
'-o-transform':'rotate('+(iMin*360/60)+'deg)',
'-ms-transform':'rotate('+(iMin*360/60)+'deg)',
'transform':'rotate('+(iMin*360/60)+'deg)'
})
$(".iSec").css(
{
'-webkit-transform':'rotate('+(iSec*360/60)+'deg)',
'-moz-transform':'rotate('+(iSec*360/60)+'deg)',
'-o-transform':'rotate('+(iSec*360/60)+'deg)',
'-ms-transform':'rotate('+(iSec*360/60)+'deg)',
'transform':'rotate('+(iSec*360/60)+'deg)'
})
}
})
</script>
<body>
<div class="clockBox">
<div class="clockIco"></div>
<div class="clockMove">
<div class="cSpeck">
<div class="iSec"></div>
<div class="iMinu"></div>
<div class="iHour"></div>
</div>
</div>
</div>
</body>
</html>
