Create an Anolog Clock

The anolog clock is combination of css3 and javascript with svg.

html

svg contains four parts: the face,hour,minute and second. Draw the clock with svg and stylish the stroke attributes.

css

The transform-origin fixed the center point which can be rotated around.
The transition is a way to animate the arm smoothly.

js

Analysis:
1.Select three arms with querySelector. Or you can use document.getElementById("id name").
2.Fetch the computer time with Date() and pick up hour,minute and second seperately.
3.Math the degree when each arm move in each time.

secPosition: one circle is 360 deg and 60 seconds for a circle.So each second is 6 deg.minPosition: the same as sec and when second is moving, the min arm should be moving 1/60 of a min.hrPosition:one circle is 360 deg and contains 12 hours. And when minute is moving, the hour arm should be moving the 1/12 of a hour.

4.After calculating the degree of each arm, the selectors should be rotated own degree every second.
The function runTheClock calculates the degree of each position after one second running which can avoid the arms jump when they get to zero position.