直接上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } #wrap{ width: 300px; height: 300px; background: #F0F0F0; margin: 200px auto; position: relative; } #hour{ width: 6px; height: 60px; background: #000; position: absolute; top: 90px; left: 147px; /*重置时针基点,让其沿着绿色圆点中心转动*/ transform-origin: 3px 60px; } #min{ position: absolute; top: 70px; left: 148px; width: 4px; height: 80px; background: #000; /*重置分针基点,让其沿着绿色圆点中心转动*/ transform-origin: 2px 80px; } #sec{ position: absolute; top: 50px; left: 149px; width: 2px; height: 100px; background: red; /*重置秒针基点,让其沿着绿色圆点中心转动*/ transform-origin: 1px 100px; } #icon{ width: 20px; height: 20px; border-radius: 50%; background-color: yellowgreen; position: absolute; top: 140px; left: 140px; } #list{ list-style: none; } #list li{ width: 2px; height: 8px; background: #000; position: absolute; top: 0; left: 149px; /*重置li的基点*/ transform-origin: 1px 150px; } #list li:nth-child(5n+1){ width: 4px; height: 12px; /*li的高度重新设置后会有1px 的偏差,所以重置基点*/ transform-origin: 2px 150px; } </style> </head> <body> <div id="wrap"> <ol id="list"> </ol> <!--时针--> <div id="hour"></div> <!--fen针--> <div id="min"></div> <!--秒针--> <div id="sec"></div> <div id="icon"></div> </div> </body> <script> window.onload=function () { var list=document.getElementById("list"); for(var i=0;i<60;i++){ var li=document.createElement("li"); li.style.transform='rotate('+(6*i)+'deg)'; list.appendChild(li); } // 获取时针,分针,秒针 var hour=document.getElementById("hour"); var min=document.getElementById("min"); var sec=document.getElementById("sec"); // 获取当前的时间 setInterval(function () { var date=new Date(); var seconds=date.getSeconds(); var minites=date.getMinutes()+seconds/60; var hours=date.getHours()+minites/60; hour.style.transform='rotate('+(30*hours) +'deg)'; min.style.transform='rotate('+(6*minites) +'deg)'; sec.style.transform='rotate('+(6*seconds) +'deg)'; },1000) } </script> </html>
最终的效果: