没有写过机械时钟的时候,觉得这种代起码的有几年经验的老码农才写的出来,当理解了transform-origin 这个属性,然后熟悉dom ,机械时钟跟电子时钟的难度差不多。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding:0; } .box{ 200px; height: 200px; position: absolute; left: 0; top: 0; right: 0; bottom:0; margin: auto; border-radius: 50%; border: 2px solid; } ul>li{ 2px; height: 10px; background-color: #333; list-style-type: none; position: absolute; left:98px ; transform-origin: center 100px; } ul>li:nth-child(5n){ height: 15px; 3px; } .center{ position: absolute; left: 0; top: 0; right: 0; bottom:0; margin: auto; 15px; height: 15px; background-color:green; border-radius: 50%; z-index: 1; } .h{ height: 30px; 6px; background-color: red; position: absolute; left: 97px; top: 70px; transform-origin: center bottom; } .m{ height: 50px; 4px; background-color: green; position: absolute; left: 98px; top: 50px; transform-origin: center bottom; } .s{ height: 70px; 2px; background-color: #777; position: absolute; left: 99px; top: 30px; transform-origin: center bottom; } </style> </head> <body> <div class="box"> <div class="center"></div> <div class="h"></div> <div class="m"></div> <div class="s"></div> <ul></ul> </div> <script> for(var i=0;i<60;i++){ var ul=document.querySelector("ul"); var li=document.createElement("li"); ul.appendChild(li); var str=" li:nth-child("+(i+1)+"){transform: rotate("+(i+1)*6+"deg);}"; var style=document.createElement("style"); style.append(str); document.head.appendChild(style) } start() function start() { var date=new Date(); var h=date.getHours(); var m=date.getMinutes(); var s=date.getSeconds(); document.querySelector(".s").style.transform="rotate("+s*6+"deg)"; document.querySelector(".m").style.transform="rotate("+(s/60+m)*6+"deg)"; document.querySelector(".h").style.transform="rotate("+(h+m/60)*30+"deg)" } setInterval('start()',1000) </script> </body> </html>