Another clock effect is coming. This implementation does not require canvas, it is drawn by div, ul, and li, which is fun and realistic.
Haha ~
The js you need to achieve this effect of moving around, but there is not much content in js, so it is not difficult.
It is mainly the idea of using transform in CSS. Transform has many changing attributes, and ordinary clocks
It's a round thing in my mind. So can I rotate this property (rotate) to implement it? Its scale
Using rotation and setting the rotation point at the center of the circle, wouldn't it be possible to turn around the center of the circle? The bottom of the hour hand is not
Is the center of the circle in contact? Then it would be OK to set the bottom of the hour hand to the rotation point. I roughly talk about my ideas.
Code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>transform</title> <style id="css"> #clock{ width: 200px; height: 200px; border: 2px solid #000; border-radius: 50%; margin: 100px auto 0; position: relative; } #clock ul{ width: 200px; height: 200px; position: relative; list-style: none; padding: 0; margin: 0; } #clock ul{ width: 200px; height: 200px; position: relative; list-style: none; padding: 0; margin: 0; } #clock ul{ width: 2px; height: 10px; background: #000; transform-origin: center 100px; position: absolute; top: 0; left: 50%; } #clock ul li:nth-of-type(5n+1){ height: 20px; } #hour{ height: 40px; width: 4px; background: #00fefe; position: absolute; top: 60px; left: 99px; transform-origin:center bottom; } #min{ height: 60px; width: 3px; background: #001afe; position: absolute; top: 40px; left: 99px; transform-origin: center bottom; transform: rotate(15deg); } #sec{ height: 70px; width: 2px; background: #000; position: absolute; top: 30px; left: 99px; transform-origin:center bottom; } #dot{ width: 10px; height: 10px; position: absolute; left: 95px; top: 95px; background: #aaa; border-radius: 50%; } </style></head><body> <div id="clock"> <ul></ul> <div id="hour"></div> <div id="min"></div> <div id="sec"></div> <div id="dot"></div> </div> <script> var oCss=document.getElementById("css"); var oClock=document.getElementById("clock"); var oUl=oClock.getElementsByTagName("ul")[0]; var oHour=document.getElementById("hour"); var oMin=document.getElementById("min"); var oSec=document.getElementById("sec"); var strLi=""; var strCss=""; for(var i=0;i<60;i++){ strLi+="<li></li>"; } oUl.innerHTML=strLi; for(var i=0;i<60;i++){ strCss+='#clock ul li:nth-of-type('+(i+1)+'){transform:rotate('+i*6+'deg);}'; } oCss.innerHTML+=strCss; time(); setInterval(time,1000); function time(){ var date=new Date(); var h=date.getHours(); var m=date.getMinutes(); var s=date.getSeconds(); oHour.style.transform="rotate("+(h+m/60)*30+"deg)"; oMin.style.transform="rotate("+(m+s/60)*6+"deg)"; oSec.style.transform="rotate("+s*6+"deg)"; } </script></body></html>The most important thing in drawing with tags is positioning, because in this way we can put the box that has been formed into shape in the position you want. The internal css style sheet can be obtained by obtaining elements, so that you can add styles to it using innerHTML, and add them in a loop. There are also many scales, so you can use loop to add, which saves time and effort. As for the remaining time, you can execute the function every 1 second, so that it will move.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.