Js + css3 implement dynamic clock ------- Day66, css3 ------- day66

Js + css3 implement dynamic clock ------- Day66, css3 ------- day66

I was annoyed when I migrated my house one day yesterday without installing broadband at the end, but I had a lot of ideas after I packed up my new house, here we will first implement a dynamic clock (it has been uploaded to the resource, and the picture is a bit rough, sweaty ...)

Here we will record the simple and easy-to-implement functions. What problems have I encountered during the implementation process, because I haven't checked the online code yet, it's just based on my current study. It may be a little complicated and rough, but it's still a little fun to realize this effect.

First, the final implementation (static image );

FirstPrepare materialsI found a clock clip from the Internet. Who asked me to restore my ps food? Then I had a dial, hour hand, minute hand, and second hand, in this way, the basic elements of an alarm are complete;

ThenPlacement of MaterialsHere is the first problem to be solved, although it is self-identified (I put it in the middle of the page)

********** Center css*******

Let's take a look at the implementation code;

Html section

 <div id="back">  </div>

Then, set the style:

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

The fixed position is set here. At this time, the left and top points set are described in comparison with the points in the upper left corner, then set margin-left and margin-top to half the length and width of the div (which is displayed as the back div ).

ThenPlacement of second-hand and hour-hand pointsHere, we need to consider two problems: 1. The three needles are set to a fixed position, and the rotating points must be determined,Layered level should be obvious; 2,Rotate around Fixed Points(This is a bit tangled)

*******************Rotate around Fixed Point

As for rotation, we have previously implemented that as long as css is to be moved, the basic principle of implementation here is the same, so that we can use transform: rotate (--- deg ), so I used this to rotate. As a result, I found that I could not make the image rotate at a fixed point. It could only rotate in the center of the div itself. How should I do this? after a long time of confusion, finally, I thought of a solution. Since the center is fixed, I wouldPlace the fixed point that you want to rotate around in the center.Isn't it possible to generate the illusion of rotating around the fixed point? As for the other half, I should set the background color to the same as the dial color, and set the transparency opacity to the maximum value to achieve full transparency, so we have the following encoding:

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>

Here, because the image is a little rough, the distance is different. See 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;

Finally Use js to dynamically change the Rotation AngleSee the following implementation method:

<Script type = "text/javascript"> window. onload = function () {var miao = document. getElementById ("miao"); var fen = document. getElementById ("fen"); var shi = document. getElementById ("shi"); var hour; // var minute at the current time; // var second for the current minute; // var circleHour for the current second; // var circleMinute for the angle of clockwise rotation; // The angle of the split needle rotation var circleSecond; // The angle of the second needle rotation var cycle = setInterval (function () {var nowDate = new Date (); // The current read time is hour = nowDate. getHours (); circleHour = (parseInt (hour) % 12) * 30; shi. style. transform = "rotate (" + circleHour + "deg)"; // The read time is in the 24-hour format and is converted to 12-hour minute = nowDate. getMinutes (); fen. style. transform = "rotate (" + parseInt (minute) * 6 + "deg)"; second = nowDate. getSeconds (); miao. style. transform = "rotate (" + parseInt (second) * 6 + "deg)" ;}, 1000); // method called every 1000 milliseconds} </script>

In this way, the effect has come out. Although it is a bit rough, it still makes me happy. As for the basic ideas of angle acquisition, I will not repeat them here.

In this way, it seems that things are useless. Why is it so difficult at the beginning ..........

How to Set CSS 3 styles in js

I don't know what you want to do. It doesn't make sense to directly set this value through js.

To achieve object rotation, you only need to dynamically adjust the class of the object in the trigger event.

For example, an image is rotated when the mouse moves up.


 
How does CSS3 or JS implement the Display Effect of the Windows 8 Metro menu?

Css3 animation transparency changes position change and size change