<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ 200px; height:200px; border-radius: 50%; border:1px solid #000; position: relative; margin:5px auto; text-align: center; box-shadow: 0px 0px 20px 5px #000; } div span{ transform-origin: bottom center; } .sec{ position: absolute; top:50%; left:50%; margin-left:-2px; margin-top:-80px; height:80px; 4px; background: red; border-radius: 50% 50% 0 0; } .min{ position: absolute; top:50%; left:50%; margin-left:-3px; margin-top:-60px; height:60px; 6px; background: #000; border-radius: 50% 50% 0 0; } .hou{ position: absolute; top:50%; left:50%; margin-left:-4px; margin-top:-40px; height:40px; 8px; background: #000; border-radius: 50% 50% 0 0; } .cap{ position: absolute; top:50%; left:50%; margin-left:-6px; margin-top:-6px; height:12px; 12px; background: radial-gradient(#ccc,#999); border-radius: 50%; } i b{ position: absolute; top:12px; left:-4px; } </style> <script> window.onload=function(){ var aSpan=document.querySelectorAll('span'); var oBox=document.getElementById('box'); clock(); setInterval(clock,30); for (var i = 0; i <60; i++) { var oI=document.createElement('i'); oI.style.width='6px'; if(i%5){ oI.style.height='8px'; }else{ oI.innerHTML='<b>'+i/5+'</b>'; oI.children[0].style.transform='rotate(-'+i*6+'deg)'; oI.style.height='16px'; } oI.style.position='absolute'; oI.style.top='0px'; oI.style.left='100px'; oI.style.background='#000'; oI.style.transform='rotate('+i*6+'deg)'; oI.style.transformOrigin='0px 100px'; oBox.appendChild(oI); } function clock(){ var oDate=new Date(); var h=oDate.getHours(); var m=oDate.getMinutes(); var s=oDate.getSeconds(); var ms=oDate.getMilliseconds(); aSpan[2].style.transform='rotate('+(360*(h%12)/12+m*30/60)+'deg)'; aSpan[1].style.transform='rotate('+(360*m/60+s*6/60)+'deg)'; aSpan[0].style.transform='rotate('+(360*s/60+ms*6/1000)+'deg)'; } }; </script> </head> <body> <div id="box"> <span class="sec"></span> <span class="min"></span> <span class="hou"></span> <p class="cap"></p> </div> </body> </html>