jquery version Clock (CSS3 implementation)

The main reason to do the clock is because like, think it good-looking (I have a little love for special effects ...). ）。 Do when the sense of engineering will be a bit large, do the discovery to realize it is not difficult, as long as the mind, in fact, quite simple (I make things like the overall direction to make good, and then do the side to find the feeling, the end may have a different surprise).

I use the background picture of the clock here, the first I think the picture looks good, second I think the main function should be first to consider drawing (it is a bit lazy, haha ~). All right, no more nonsense, get to the point.

　　First, the picture demonstration

　　

　　Second, HTML code

<Divclass= "box">    <Divclass= "Clock"> <!--Clock Background Chart -        <Divclass= "Second-hand"></Div> <!--seconds -        <Divclass= "Minute-hand"></Div> <!--minute -        <Divclass= "Hour-hand"></Div> <!--Hour -    </Div></Div>

Third, CSS code

. Box{margin:10px Auto;width:894px;Height:863px;}. Clock{position:relative;width:894px;Height:863px;background:URL ("images/bg.png") no-repeat;}. Second-hand,.minute-hand,.hour-hand{position:Absolute; Left:50%;Margin-left:-6px;Top:-13px;width:20px;Height:894px;background:URL ("images/clock_needle.png") no-repeat;}/*The length of the three pin is consistent with the width of the clock (longest), which allows for a central rotation*/. Second-hand{background-position:-1px 59px;Z-index: +;}. Minute-hand{background-position:-25px 56px;Z-index: -;}. Hour-hand{background-position:-54px 56px;Z-index:Ten;}

　　Analysis:

It is important to note that the length of the second hand, minute hand and hour hand and the width of the clock (length, who is the same as who long) are the same (the clock is preferably square), because the picture is rotated in the center of the image as it rotates.

　　Four, JS code

$(function(){            var$second = $ (". Second-hand"),/*seconds*/$minute= $ (". Minute-hand"),/*minute*/$hour= $ (". Hour-hand"),/*Hour*/Nowtime=function(){/*Execute function*/                        /*get the hours, minutes and seconds now*/                        functionGetTime () {varnow =NewDate (); return{hours:now.getHours ()+ now.getminutes ()/60,/*number of hours, including minutes*/minutes:now.getMinutes ()+ now.getseconds ()/60,/*minute number, including number of seconds*/seconds:now.getSeconds ()/*Number of seconds*/                            }                        }                        var_date = GetTime ();/*the time object received*/                        /*The second hand , a lap 360 degrees total is 60 seconds (60 lattice), one second (one block) is 6 degrees, multiplied by 6 is the main reason is the number of seconds multiplied by a lattice of degrees equal to the total number of degrees*/                        var_secondrotate = Math.floor (_date.seconds) * 6; /*The minute hand, a lap 360 degrees total is 60 minutes, and the number of seconds explained similar*/                        var_minuterotate = _date.minutes * 6; /*The hour hand , a lap 360 degrees is 12 hours, one hours is 30 degrees (in fact, is 5), the number of hours multiplied by an hour is the total degree of the degree. But to consider the number of hours greater than 12, here to take the division 12 of the square hair can be achieved*/                        var_hourrotate = (_date.hours% 12) * 30; $second. css ({"Transform": "Rotate (" +_secondrotate+ "deg)"});/*Setting the second hand rotation degree*/$minute. css ({"Transform": "Rotate (" +_minuterotate+ "deg)"});/*set the rotation of the minute hand*/$hour. css ({"Transform": "Rotate (" +_hourrotate+ "deg)"});/*set the rotation of the hour*/} setinterval (Nowtime,1000);/*Loop call, one second after call*/        })

　　Analysis:

　　Note that the explanation of the comparison is clear, I mainly emphasize how to get the second hand, minute hand and the rotation of the hour hand degrees.

The second hand rotates a lap for a total of 60 seconds, and one lap is 360°. Think of this, a second is 6°, a total of 60 block, a second is a box is also 6°, that is the second hand rotation is the number of seconds multiplied by 6.

The minute hand and minute hand are interpreted similar to the second hand. It rotates for 60 minutes, so a minute rotates 6 degrees, one minute is a box is also 6°, that is, the minute hand rotation is the number of minutes multiplied by 6.

The hour hand, a lap is 12 hours, one hours should be 360/12=30°, so the clockwise angle of rotation is the number of hours multiplied by 30°. It can also be explained that one hours accounted for 5, one is 6°, that is, the number of hours multiplied by 5 and multiplied by 6 is the clockwise rotation of degrees.

　　View Demo download code

If there is no good or wrong to the other side welcome to correct, thank you ~