Idle come to have no matter, wrote a clock with JS, want train of thought to clear up only, do rise to return quite simple actually.

First send a link to see the effects

Demo

Code implementation

HTML


       

    
        

            
         

                
          

           9
          

                
          

           10
          

                
          

           11
          

                
          

           12
          

                
          

           1
          

                
          

           2
          

                
          

           3
          

                
          

           4
          

                
          

           5
          

                
          

           6
          

                
          

           7
          

                
          

           8
          

            
         

            
         

            
         

            
         

    
        


       
Copy the code

CSS

*{padding: 0; Margin: 0; } html, body { height: 100%; background: #9c9; } #warp{ width:230px; height:230px; margin:50px auto; } #clock{ width:200px; height:200px; border-radius:115px; border:15px solid #f96; background:white; position:relative; } #number div{ width:190px; height:20px; position:absolute; left:10px; top:90px; } #number span{ display:block; width:20px; height:20px; } .pointer{ position:absolute; bottom:90px; transform-origin:50% 90%; -webkit-transform-origin:50% 90%; } #houre{ width:5px; height:60px; left:98px; background:black; } #minute{ width:3px; height:70px; left:99px; background:gray; } #second{ width:1px; height:80px; left:100px; background:red; }Copy the code

The width of the div inside the number is enough, otherwise the JS layout will cause problems.

JavaScript

var oNumber=document.getElementById("number"); var oDiv=oNumber.getElementsByTagName("div"); var oSpan=oNumber.getElementsByTagName("span"); for(var i=0; iCopy the code

The main code here is two sections, one is for layout, let the number rotate to the corresponding position and adjust the direction:

for(var i=0; iCopy the code

The other is to calculate the Angle of the hand, the most important of which is how much the hour or minute hand should turn at less than an hour or less than a minute:

var houreDeg=(nowMinute/60)*30;
var minuteDeg=(nowSecond/60)*6;Copy the code

It's done. It's easy......