<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>
添加回答
举报
0/150
提交
取消