Another JS clock!transform realize the clock effect _javascript skills

Another clock effect, this implementation does not need canvas, are Div, UL, Li painted, fun has real.

haha ~

The need for JS to achieve the effect of moving around, but the content of JS is not much, it is not difficult.
is mainly a CSS transform in the use of ideas, transform there are many changes in properties, and the ordinary clock
In my heart is a circle of things, then it is not possible to rotate this property (rotate) to achieve, its scale
Use rotation and set the rotation point to the center of the circle, then you can not go around the center of the circle, and the hour hand their bottom is not and
Center of contact, then set the bottom of the hour hand is not ok for rotation point, probably said the idea.

Code:

<! DOCTYPE html>  

The most important thing to use is positioning, because we can put the shape of the box where you want it, the internal CSS style sheet can be obtained by using the Get element, so you can use innerHTML to add the style, and you can loop to add, And because the scale is too much to use the cycle to add, so save time and effort, as the remaining is the timer, given a good 1 seconds of time, every 1 seconds to perform a function, so it is moving up.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.