JS+CSS3 realization of dynamic clock-------Day66

Yesterday moved a day, broadband to the last also did not install, rather annoyed, but packed a day to rent a new house, there are a lot of ideas, here first to achieve a-dynamic clock (has been uploaded to the resources, the picture is a little rough, Khan ...) ）

Here to record, this looks simple and good implementation of the function, I encountered in the process of the problem, because at this time have not looked at the online code, just according to their current study to do, may be some trouble, some rough, but after all, is the realization of this effect, the heart or small happy under.

First come to the final realization (static picture);

First prepares the material , I searched from the net a clock material, who lets my ps also vegetable's dish, then I have the dial, the hour hand, the minute hand and the second hand, thus composes an alarm clock the basic element to be all;

Then there is the placement of the material , here is the first problem to solve, although it is the question of asking, (I put it in the middle of the page)

*CSS Implementation Center *******

Take a look at the implementation code;

HTML section

<div id= "Back" >  </div>

Then there is the setting for the style:

#back {top:50%;left:50%;margin-left:-300px;margin-top:-300px;position:absolute;z-index:1;  }

Here is the fixed position, this time set left and top is compared to the point at the top of the comparison to describe, then the Margin-left and Margin-top respectively set to the DIV (here is shown as the back div) of the length, width of half can

After the second hand and the hour hand is placed, there are two issues to consider: 1, three needles are set to fixed position, and the rotation of the point to be determined, hierarchical level to be obvious , 2, to achieve rotation around the fixed point (this is a relatively tangled place)

rotate around a fixed point

Mention rotation, in front we have achieved as long as the CSS to the div to move, the basic principle here is the same, so that we can use transform:rotate (---deg), so I use this to rotate, and I found that I can not let the picture on the fixed point of rotation, It can only be rotated in the center of the div itself, that how to do, confused a long time later, I finally think of a way, since the center is fixed, then I want to revolve around the fixed point on the center, can not be generated around the fixed point of the illusion of rotation, as for the other half of the part, I will base it on the same color as the dial, and set the transparency opacity to the maximum value for full transparency, and then the following code:

HTML section:

<div id= "Miao" style= "Height:320px;background: #fff; width:20px;-moz-opacity:1;" >   <div style= "height:30px;width:20px;opacity:1;" ></div> <div></div>  </div>   <div Id= "Fen"  style= "Height:320px;background: #fff; width:20px;-moz-opacity:1;" >   <div style= "height:20px;width:20px;" ></div>  </div>   <div id= "shi"  style= " Height:320px;background: #fff; width:20px;-moz-opacity:1; " >   <div style= "height:30px;width:20px;" ></div>  </div>

This is because the picture is slightly rough, so set the distance, look at the CSS style settings:

  #miao {top:50%;left:50%;margin-top:-140px;margin-left:-10px;position:absolute;z-index:2;  } #fen {top:50%;left:50%;margin-top:-140px;margin-left:-5px;position:absolute;z-index:3;  } #shi {Top:50%;left : 50%;margin-top:-140px;margin-left:-5px;position:absolute;z-index:4;

The Last is using JS to dynamically change the angle of rotation, take a look at the following implementation methods:

<script type= "Text/javascript" >window.onload=function () {var Miao=document.getelementbyid ("Miao"); var fen= document.getElementById ("Fen"), var Shi=document.getelementbyid ("Shi"), var hour;//current var minute;//current split var second;// Current second var circlehour;//clockwise angle Var circleminute;//minute hand turning angle Var circlesecond;//second hand turning angle Var cycle=setinterval (function () { var nowdate=new date ();//Read current time hour=nowdate.gethours (); Circlehour= (parseint (hour)%12) *30;shi.style.transform= " Rotate ("+circlehour+" deg);//Read to the time of 24-hour system, converted to 12 hours minute=nowdate.getminutes (); fen.style.transform= "Rotate (" + parseint (minute) *6+ "deg"; Second=nowdate.getseconds (); miao.style.transform= "Rotate (" +parseint (second) *6+ "deg)" ;},1000);//Call the method every 1000 milliseconds}  </script>

In this way, the effect is out, although some rough, but still let me happy unceasingly, as to the angle of access are some of the basic ideas, not more to repeat.

It feels like this, it really doesn't matter how much, why just start to do when the citrus feel so difficult ....