Creative Clock Project for JavaScript (example) and javascript example

Creative Clock Project for JavaScript (example) and javascript example

"Clock Display project" Description document (corresponding code is included at the end of the document)

I. Final effect display:

Ii. Project highlights

1. Clear code structure

2. The current time and current date can be dynamically displayed in real time.

3. Simple, beautiful, and generous Interface

4. Improve browser compatibility

Iii. knowledge point summary:

JQuery, native javascript, css3, h5

Iv. Explanation of difficulties

1. Obtain the Rotation Angle of each pointer

First, you must clarify the following concepts:

The clock pointer is rotated 360 degrees a week.

Hour hand:

The dial has a total of 12 hours, and each passing hour requires 30 degrees of rotation;

Split needle:

There are a total of 60 small grids on the dial, each minute the sub-needle goes through a small grid, turn 6 degrees;

Seconds:

There are a total of 60 small grids on the dial. Every minute the second needle goes through a small grid and it turns 6 degrees;

(1) obtain the current time

For example, the current time is;

The hour hand must be between 9 and 10, but only the hour can be obtained through the method. Therefore, you must obtain the current hour and the current minute, in this way, we can better determine the Rotation Angle of the hour hand, that is, the following method:

(2) Obtaining the Rotation Angle

The Rotation Angle of the hour hand is as follows:

Likewise, the rotation angle of the minute and second needles is as follows:

Split needle:

Seconds:

To make the clock more accurate, it is accurate to milliseconds here;

(3) Execution frequency, that is, second-hand rotation frequency control

Adjust the execution interval of the function to change the second-hand rotation frequency.

5. Project to be optimized

1. The page is too concise and needs further optimization and improvement;

2. Draw a second scale on the clock before drawing;

6. Code of each part in the project

1. HTML code

<! DOCTYPE html> 
2.css code
* {Margin: 0; padding: 0;} body {background: # f9f9f9; color: #000; font: 15px Calibri, Arial, sans-serif; text-shadow: 1px 2px 1px # FFFFFF;} a, a: visited {text-decoration: none; outline: none; color: # fff;} a: hover {text-decoration: underline; color: # ddd;}/* the footer (tail) */footer {background: #444 url (".. /images/bg-footer.png ") repeat; position: fixed; width: 100%; height: 70px; bottom: 0; left: 0; color: # fff; text-shadow: 2px 2px #000;/* improve browser compatibility */-moz-box-shadow: 5px 1px 10px #000;-webkit-box-shadow: 5px 1px 10px #000; box-shadow: 5px 1px 10px #000;} footer h1 {font: 25px/26px Acens; font-weight: normal; left: 50%; margin: 0px 0 0 150px; padding: 25px 0; position: relative; width: 400px;} footer. orig,. orig: visited {background: url (".. /images/demo2.png ") no-repeat right top; border: none; text-decoration: none; color: # FCFCFC; font-size: 14px; height: 70px; left: 50%; line-height: 50px; margin: 12px 0 0-400px; position: absolute; top: 0; width: 250px;}/* styling for the clock (clock style) */# clock {position: relative; width: 600px; height: 600px; list-style: none; margin: 20px auto; background: url ('.. /images/clock.png ') no-repeat center;} # seconds, # minutes, # hours {position: absolute; width: 30px; height: 580px; left: 270px ;} # date {position: absolute; top: 365px; color: #666; right: 140px; font-weight: bold; letter-spacing: 3px; font-family: ""; font-size: 30px; line-height: 36px ;}# hours {background: url ('.. /images/hands.png ') no-repeat left; z-index: 1000;} # minutes {background: url ('.. /images/hands.png ') no-repeat center; width: 25px; z-index: 2000;} # seconds {background: url ('.. /images/hands.png ') no-repeat right; z-index: 3000 ;}
3. js Code
(1) download a js reference package (you will know about Baidu or Google)
(2) js Code
$ (Document ). ready (function () {// dynamically insert HTML code, mark the clock var clock = ['<ul id = "clock"> ', '<li id = "date"> </li>', '<li id = "seconds"> </li> ', '<li id = "hours"> </li>', '<li id = "minutes"> </li>', '</ul>']. join (''); // gradually display the clock and append it to the home page $ (clock ). fadeIn (). appendTo ('body'); // The Automatic execution function for updating the Clock view every second // you can also use this method: setInterval (function Clock (){})(); (function Clock () {// obtain the date and time var Date = new date (). getDate (), // get the current Date hours = new Date (). getHours (), // get the current hour minutes = new Date (). getMinutes (); // obtain the current minute seconds = new Date (). getSeconds (), // get the current second MS = new Date (). getMilliseconds (); // get the current millisecond // display the current date on the clock $ ("# date" ).html (date); // get the current number of seconds, determine the second-hand position var srotate = seconds + MS/1000; $ ("# seconds" ).css ({// determine the Rotation Angle 'transform ': 'rotate ('+ srotate * 6 + 'deg)',}); // obtain the current number of minutes and obtain the position var mrotate = minutes + srotate/60; $ ("# minutes" ).css ({'transform': 'rotate ('+ mrotate * 6 + 'deg)', // improves browser compatibility '-moz-transform ': 'rotate ('+ mrotate * 6 + 'deg)', '-webkit-transform': 'rotate ('+ mrotate * 6 + 'deg )'}); // obtain the current hour. Obtain the hourly value var hrotate = hours % 12 + (minutes/60). $ ("# hours" ).css ({'transform ': 'rotate ('+ hrotate * 30 + 'deg)', // improves browser compatibility '-moz-transform': 'rotate ('+ hrotate * 30 +' deg) ','-webkit-transform ': 'rotate (' + hrotate * 30 + 'deg) '}); // run the setTimeout (Clock, 1000 );})();});
4. Some necessary image materials (c I will not list or present them one by one here)
Note:
1. Transform attributes

2. rotate () method

The above JavaScript creative Clock Project (for example) is all the content shared by the editor. I hope you can give us a reference and support the house of helping customers.