<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="clock.css" rel="stylesheet" type="text/css"/>
<script src="clock.js"></script>
<title>时钟</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
#bg{
width:210px;
height: 100px;
background-color: #00cc00;
padding-top: 25px;
}
#clock{
width: 46px;
height: 46px;
border: 7px solid #fff;
border-radius: 50%;
position: relative;
left: 50%;
margin-left: -30px;
}
#h{
width: 6px;
height: 17px;
background-color: #fff;
border-radius: 1px;
position: absolute;
top: 6px;
left: 20px;
transform-origin: 50% 18px;
}
#m{
width: 6px;
height: 20px;
background-color: #fff;
border-radius: 2px;
position: absolute;
top:3px;
left: 20px;
transform-origin: 50% 20px;
}
#s{
width: 6px;
height: 6px;
background-color: #000;
border-radius: 50%;
position: absolute;
top:-7px;
left: 20px;
transform-origin: 50% 30px;
animation:circle 1.6s linear 0s infinite normal forwards;
-moz-animation:circle 1.6s linear 0s infinite normal forwards;
-webkit-animation:circle 1.6s linear 0s infinite normal forwards;
-o-animation:circle 1.6s linear 0s infinite normal forwards;
}
@keyframes circle
{
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
@-moz-keyframes circle
{
0% {-moz-transform: rotate(0deg)}
100% {-moz-transform: rotate(360deg)}
}
@-webkit-keyframes circle
{
0% {-webkit-transform: rotate(0deg)}
100% {-webkit-transform: rotate(360deg)}
}
@-o-keyframes circle
{
0% {-o-transform: rotate(0deg)}
100% {-o-transform: rotate(360deg)}
}
#circle{
width:8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 19px;
left: 19px;
}
</style>
</head>
<body>
<div id="bg">
<div id="clock">
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
<div id="circle"></div>
</div>
</div>
</body>
<script type="text/javascript">
function rotate(){
var now = new Date();
var s = now.getSeconds();
var sDeg = 10*s;
var m = now.getMinutes();
var mDeg = 6*(m+s/60);
var h = now.getHours();
h>12&&(h-=12);
var hDeg = (m/60+s/3600+h)*30;
document.getElementById("m").style.transform="rotate("+sDeg+"deg)";
//document.getElementById("m").style.transform="rotate("+mDeg+"deg)";
document.getElementById("h").style.transform="rotate("+hDeg+"deg)";
}
window.onload=function(){
rotate();
setInterval(rotate,10);
}
</script>
</html>
