How to create exquisite HTML clock in five steps and exquisite clock in five steps

How to create exquisite HTML clock in five steps and exquisite clock in five steps

After learning HTML, CSS, and JS for a period of time, I will give you a pretty HTML clock that is not as powerful as the real-force clock. First, let's look at the figure:


Knowledge points involved: CSS3 animation, DOM operation, timer, and dot coordinate calculation (many people have already returned them to their teachers ~)
Next, let's make it in five steps.

 

Step 1. Prepare HTML

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

<Div id = "clock">
<Div class = "bg">
<Div class = "point">
<Div id = "hour"> </div>
<Div id = "minute"> </div>
<Div id = "second"> </div>
<Div class = "circle"> </div>
</Div>
</Div>
</Div>

Step 2. Prepare CSS

Define the color and size of the pointer.Transform: rotate (-90deg );Used to rotate the pointer,Transform-origin: 0 6px;Used to set the center of rotation.
<Style>
*{
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 3 s linear 100! * Alternate *!; */
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 );
}
</Style>

Step 3. Calculate the hour

JS gets the current time through the Date object, getHours gets the hour, getMinutes gets the minute, And getSeconds gets the second. The hour hand rotates for 12 cells a week, and the angle of each cell is 360 °/12. The minute and second are both 60 cells, and the angle of each cell is 360 °/60.
Function clock (){
Var date = new Date (); // obtain the current time
// Hour (0-23) minute (0-59) Second (0-59)
// Calculate the Rotation Angle
Var hourDeg = date. getHours () * 360/12;
Var minuteDeg = date. getMinutes () * 360/60;
Var secondDeg = date. getSeconds () * 360/60;
// Console. log (hourDeg, minuteDeg, secondDeg );
// Set the pointer
Hour. style. transform = 'rotate ('+ hourDeg + 'deg )';
Minute. style. transform = 'rotate ('+ minuteDeg + 'deg )';
Second. style. transform = 'rotate ('+ secondDeg + 'deg )';
}

Step 4. Clock Rotation

Set the timer through setInterval and refresh it once every second. Note: You need to initialize and execute it once. Otherwise, the effect will be displayed after 1 s.
// Initialize and execute once
Clock ();
SetInterval (clock, 1000 );

Step 5. Draw the digit time

The numeric time is also on a circumference. We only need to determine the radius and then obtain the coordinates on the radius. Just locate each number on the left. Let's take a look at the calculation rules of the circular coordinate system:


 
* Circle radius coordinate calculation:
* X = pointX + r * cos (angle );
* Y = pointY + r * sin (angle );
However, note that the coordinates we calculated are the coordinates of the points on the arc. When positioning each number, the coordinates are located at the upper-left corner of the element, so that our numbers will be offset. That is to say, the center of the number is not on the arc. The solution is to split the coordinate point (x, y) into half of its own (x-w/2, y-h/2)
In this way, 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 <= 12; I ++ ){
// Calculate the angle of each grid
Var angle = deg * I;
// Calculate the coordinates on the circle
Var x = pointX + r * Math. cos (angle );
Var y = pointY + r * Math. sin (angle );
// Create a div and write a number
Var number = document. createElement ('div ');
Number. className = 'number ';
Number. innerHTML = I;
// Subtract half of itself to make the center of the div on the arc
Number. style. left = x-25 + 'px ';
Number. style. top = y-25 + 'px ';
// Add to page
MyClock. appendChild (number );
}
}
Complete JS Code:
<Script>
/***
* Clock:
* 1> Rotation: rotate (90deg)
* 2> center of rotation: transform-origin
**/
//TODO Step 1:Get the clock pointer
Var hour = document. getElementById ('hour '); // hour hand
Var minute = document. getElementById ('minute '); // split the needle
Var second = document. getElementById ('second'); // seconds
Var myClock = document. getElementById ('clock '); // clock

//TODO Step 2:Get current time,Place the pointer in the correct position
Function clock (){
Var date = new Date (); // obtain the current time
// Hour (0-23) minute (0-59) Second (0-59)
// Calculate the Rotation Angle
Var hourDeg = date. getHours () * 360/12;
Var minuteDeg = date. getMinutes () * 360/60;
Var secondDeg = date. getSeconds () * 360/60;
// Console. log (hourDeg, minuteDeg, secondDeg );
// Set the 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 Step 3:Set timer
SetInterval (clock, 1000 );

/***
* Circle radius coordinate calculation:
* X = pointX + r * cos (angle );
* Y = pointY + r * sin (angle );
**/
Var pointx= 200;
Var pointY = 200;
Var r = 150;
//TODO Step 4:Draw clock numbers
Function drawNumber (){
Var deg = Math. PI * 2/12; // 360 °
For (var I = 1; I <= 12; I ++ ){
// Calculate the angle of each grid
Var angle = deg * I;
// Calculate the coordinates on the circle
Var x = pointX + r * Math. cos (angle );
Var y = pointY + r * Math. sin (angle );
// Create a div and write a number
Var number = document. createElement ('div ');
Number. className = 'number ';
Number. innerHTML = I;
// Subtract half of itself to make the center of the div on the arc
Number. style. left = x-25 + 'px ';
Number. style. top = y-25 + 'px ';
// Add to page
MyClock. appendChild (number );
}
}
DrawNumber ();
</Script>

How are you doing?