<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#cont{
width: 400px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background-image: url("http://www.minxiwp.com/wp-content/uploads/2016/06/2.jpg");
}
.cont{
position: absolute;
}
#div
{
margin:100px;
width:5px;
height:200px;
margin-left: 200px;
margin-top: 97px;
}
.div1{
width: 5px;height: 100px;
background-color: white;
display:none;
}
.div2{
width: 5px;height: 100px;
background-color:black;
}
/*fen*/
#div1
{
margin:100px;
width:5px;
height:160px;
margin-left: 200px;
margin-top: -280px;
}
.div11{
width: 5px;height: 80px;
background-color: white;
display:none;
}
.div21{
width: 5px;height: 80px;
background-color:yellow;
}
/*miao*/
#div2
{
margin:100px;
width:5px;
height:120px;
margin-left: 200px;
margin-top: -240px;
}
.div12{
width: 5px;height: 60px;
background-color: white;
display:none;
}
.div22{
width: 5px;height: 60px;
background-color:red;
}
</style>
<script>
var i= 0,j=0,k=0;
function xuzhuan(){
var date=new Date();
h=date.getHours();
m=date.getMinutes();
s=date.getSeconds();
i=m*6;
if(h>=12){
h=h-12;
}
k=h*30;
if(k==180){
k=0;
}
if(i==180){
i=0;
}
j=s*6;
if(j==180){
j=0;
}
document.getElementById("div").style.transform="rotate("+j+"deg)";
document.getElementById("div1").style.transform="rotate("+i+"deg)";
document.getElementById("div2").style.transform="rotate("+k+"deg)";
t=setTimeout('xuzhuan()',500);
}
</script>
</head>
<body οnlοad="xuzhuan()">
<div id="cont" >
<div class="cont">
<div id="div">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div id="div1">
<div class="div11"></div>
<div class="div21"></div>
</div>
<div id="div2">
<div class="div12"></div>
<div class="div22"></div>
</div>
</div>
</div>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#cont{
width: 400px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background-image: url("http://www.minxiwp.com/wp-content/uploads/2016/06/2.jpg");
}
.cont{
position: absolute;
}
#div
{
margin:100px;
width:5px;
height:200px;
margin-left: 200px;
margin-top: 97px;
}
.div1{
width: 5px;height: 100px;
background-color: white;
display:none;
}
.div2{
width: 5px;height: 100px;
background-color:black;
}
/*fen*/
#div1
{
margin:100px;
width:5px;
height:160px;
margin-left: 200px;
margin-top: -280px;
}
.div11{
width: 5px;height: 80px;
background-color: white;
display:none;
}
.div21{
width: 5px;height: 80px;
background-color:yellow;
}
/*miao*/
#div2
{
margin:100px;
width:5px;
height:120px;
margin-left: 200px;
margin-top: -240px;
}
.div12{
width: 5px;height: 60px;
background-color: white;
display:none;
}
.div22{
width: 5px;height: 60px;
background-color:red;
}
</style>
<script>
var i= 0,j=0,k=0;
function xuzhuan(){
var date=new Date();
h=date.getHours();
m=date.getMinutes();
s=date.getSeconds();
i=m*6;
if(h>=12){
h=h-12;
}
k=h*30;
if(k==180){
k=0;
}
if(i==180){
i=0;
}
j=s*6;
if(j==180){
j=0;
}
document.getElementById("div").style.transform="rotate("+j+"deg)";
document.getElementById("div1").style.transform="rotate("+i+"deg)";
document.getElementById("div2").style.transform="rotate("+k+"deg)";
t=setTimeout('xuzhuan()',500);
}
</script>
</head>
<body οnlοad="xuzhuan()">
<div id="cont" >
<div class="cont">
<div id="div">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div id="div1">
<div class="div11"></div>
<div class="div21"></div>
</div>
<div id="div2">
<div class="div12"></div>
<div class="div22"></div>
</div>
</div>
</div>
</body>
</html>
