Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to make a beautiful and exquisite HTML clock". In the operation of practical cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Look at the picture first:

The knowledge points involved are: CSS3 animation, DOM operation, timer, calculation of dot coordinates (have many people returned it to their teachers?)

1. Prepare HTML

First, we need to prepare the HTML structure, background, dial, hands (hour hand, minute hand, second hand), numbers.

2. Prepare CSS

Define the color and size of the pointer, need to explain is transform: rotate (- 90deg); used to rotate the pointer, transform-origin:0 6px; used to set the center of rotation.

* {

Margin: 0

Padding: 0

}

# clock {

Margin: 5% auto

Width: 400px

Height: 400px

Border-radius: 10px

Background: # aaa

Position: relative

Transform: rotate (- 90deg)

}

# clock .bg {

Width: 360px

Height: 360px

Border-radius: 50%

Background: # fff

Position: absolute

Left: 50%

Top: 50%

Margin-left:-180px

Margin-top:-180px

}

# clock .point {

Position: absolute

Left: 50%

Top: 50%

Margin-left:-14px

Margin-top:-14px

}

# clock # hour {

Width: 80px

Height: 16px

Background: # 000

Margin: 6px 0 0 14px

/ * transform: rotate (30deg); * /

Transform-origin:0 8px

/ * animation: hour 3s linear 100s /

Border-radius: 16px

}

# clock # minute {

Width: 120px

Height: 12px

Background: # 000

Margin:-14px 0 0 14px

Transform-origin:0 6px

Border-radius: 12px

}

# clock # second {

Width: 160px

Height: 6px

Background: # f00

Margin:-9px 0 0 14px

Transform-origin:0 3px

Border-radius: 6px

}

# clock .point .circle {

Width: 28px

Height: 28px

Border-radius: 50%

Background: # 000

Position: absolute

Left: 0

Top: 0

}

@ keyframes hour {

From {transform: rotate (0deg);}

To {transform: rotate (360deg);}

}

# clock .number {

Position: absolute

Font-size: 34px

Width: 50px

Height: 50px

Line-height: 50px

Text-align: center

Transform: rotate (90deg)

}

3. Calculate the position of the hour hand

JS gets the current time through the Date object, getHours gets hours, getMinutes gets minutes, and getSeconds gets seconds. The rotation of the hour hand is 12 frames, and the angle of each grid is 360 °/ 12, 60 frames for minutes and seconds, and 360 °/ 60 for each grid.

Function clock () {

Var date = new Date (); / / get the current time

/ / hour (0-23) minutes (0-59) seconds (0-59)

/ / calculate the rotation angle

Var hourDeg = date.getHours () * 360 prime 12

Var minuteDeg = date.getMinutes () * 360Universe 60

Var secondDeg = date.getSeconds () * 360Universe 60

/ / console.log (hourDeg, minuteDeg, secondDeg)

/ / set pointer

Hour.style.transform = 'rotate (' + hourDeg+'deg)'

Minute.style.transform = 'rotate (' + minuteDeg+'deg)'

Second.style.transform = 'rotate (' + secondDeg+'deg)'

}

4. The clock turns

Set a timer through setInterval and refresh it every second. Note that it needs to be initialized once, otherwise the effect will not be seen until 1 second later.

/ / initialize and execute once

Clock ()

SetInterval (clock,1000)

5. Draw the digital time

The digital time is also on a circle, so we just need to determine the radius and get the coordinates on the radius. It would be nice to locate each number on the left. Take a look at the calculation rules of the circular coordinate system:

* calculation of circle radius coordinates:

* x = pointX + r*cos (angle)

* y = pointY + r*sin (angle)

Note, however, that the coordinates we calculate are the coordinates of the point on the arc, and when locating each number, it is located at the upper-left corner of the element, so that there will be an offset in our number. In other words, the central point of the number is not on the arc, and the solution is to translate the coordinate point (xmeny) by half of itself (x-w/2, y-h/2).

So that the center of the number is on the arc

Var pointX = 200

Var pointY = 200

Var r = 150

Function drawNumber () {

Var deg = Math.PI*2/12;//360 °

For (var I = 1; I rotation: rotate (90deg)

* 2 > Center of rotation: transform-origin

* * /

/ / TODO step1: get the pointer of the clock

Var hour = document.getElementById ('hour'); / / hour hand

Var minute = document.getElementById ('minute'); / / minute hand

Var second = document.getElementById ('second'); / / second hand

Var myClock = document.getElementById ('clock'); / / clock

/ / TODO step2: get the current time and place the pointer in the correct position

Function clock () {

Var date = new Date (); / / get the current time

/ / hour (0-23) minutes (0-59) seconds (0-59)

/ / calculate the rotation angle

Var hourDeg = date.getHours () * 360 prime 12

Var minuteDeg = date.getMinutes () * 360Universe 60

Var secondDeg = date.getSeconds () * 360Universe 60

/ / console.log (hourDeg, minuteDeg, secondDeg)

/ / set pointer

Hour.style.transform = 'rotate (' + hourDeg+'deg)'

Minute.style.transform = 'rotate (' + minuteDeg+'deg)'

Second.style.transform = 'rotate (' + secondDeg+'deg)'

}

/ / initialize and execute once

Clock ()

/ / TODO step3: set timer

SetInterval (clock,1000)

/ *

* calculation of circle radius coordinates:

* x = pointX + r*cos (angle)

* y = pointY + r*sin (angle)

* * /

Var pointX = 200

Var pointY = 200

Var r = 150

/ / TODO step4: draw clock numbers

Function drawNumber () {

Var deg = Math.PI*2/12;//360 °

For (var I = 1; I

This is the end of "how to make a beautiful and exquisite HTML clock". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.