<style>
.clock{
border:200px solid gray;
border-radius:200px;
opacity:0.5;
position:absolute;
left:35%;
top:15%;
}
#yx{
border:10px solid white;
border-radius:10px;
position:absolute;
left:-10px;
top:-5px;
}
#sz{
width:6px;
height:140px;
position: absolute;
background:blue;
transform-origin: 50% top;
z-index:5;
left:-3px;
top:5px;
}
#fz{
width:4px;
height:160px;
position: absolute;
background:green;
transform-origin: 50% top;
z-index:8;
left:-2px;
top:5px;
}
#mz{
width:2px;
height:180px;
position: absolute;
background:red;
transform-origin: 50% top;
z-index:10;
top:5px;
left:-1px;
}
</style>
</head>
<body>
<div class="clock">
<div id="yx"></div>
<div id="sz"></div>
<div id="fz"></div>
<div id="mz"></div>
</div>
<button onclick="time()">time</button>
<script>
var sz,fz,mz;
var ss,ff,mm;
function time(){
sz = document.querySelector("#sz");
fz = document.querySelector("#fz");
mz = document.querySelector("#mz");
setInterval(rotate,1);
}
function rotate(){
var nt =new Date();
ss =nt.getHours();
ff =nt.getMinutes();
mm =nt.getSeconds();
sz.style.transform="rotate("+ss+"deg)";
fz.style.transform="rotate("+ff+"deg)";
mz.style.transform="rotate("+mm+"deg)";
}
</script>
相关分类