You need to know a few things before making a clock:

1. Calculation of point coordinates on a circle

2. Hour hand on the clock, Conversion of minute hand and second hand

Let’s look at the clock. The first thing that comes to mind is related to the angle . Then there is the carry relationship between the second hand, minute hand, and hour hand.

For example, h hours m minutes s seconds, the angles of the hour hand, minute hand, and second hand at this moment: (-90, because of the rotateZ angle rotation rule, the default is to start from the horizontal, counterclockwise, clockwise -)

ds = s*6-90;

dm = m*6 (s/60*6)-90;

dh = h*30 (m /60*30)-90;

1. We all know that 1s = 1 / 60min, 1min = 1 / 60h;
2. Observing any watch or clock, we will find that, Usually the dial of a clock is divided into 12 large grids, 5*12=60 small grids, and the entire dial is 360°, which means that each small grid is 6°. In other words, every time the second and minute hands move, they will move through 1 small division, 6°, and when the hour hand moves, they will move through one large division, 5*6°=30°; therefore, the second and minute hands The base value of movement is 6°, and the hour hand is 30°;
3. In addition, when the minute hand moves, the hour hand does not stand still, but moves forward silently, unwilling to be lonely. That is to say, when the minute hand moves Suddenly, when it moves 6°, the hour hand actually moves 1/60 * 30°. Therefore, when calculating the angle of the hour hand, do not ignore the influence of the minute hand. (Although the second hand has the same effect on the minute hand, it is almost invisible, so we usually ignore it)

3. js get time

The code is as follows:

/*Dial*/
.clock {
position: relative;
width: 200px;
height: 200px;
border-radius: 100%;
background-color: #000;
margin: 50px auto;
}
.pointer li.circle {
position: absolute;
top: 50%;
left: 50 %;
transform-origin: left center; /*The base point is set in the leftmost middle to ensure rotation around the center of the circle*/
background: #fff;
width: 10px;
height: 10px;
border-radius: 100%;
margin-top: -5px;
margin-left: -5px;
}

/*Scale*/
.line -hour li,
.line-min li {
position: absolute;
left: 50%;
top: 50%;
transform-origin: 0 0;
background -color: #fff;
}
.line-hour li {
width: 10px;
height: 2px;
}
.line-min li {
width : 5px;
height: 2px;
}

/*number*/
.number {
position: absolute;
height: 150px;
width: 150px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /*Keep the number centered*/
font-size: 15px;
color: #fff;
}
.number li {
position: absolute;
transform: translate(-50%, -50%);
}

/*Pointer*/
.pointer li {
position: absolute;
top: 50%;
left: 50%;
transform-origin: left center; /*base point Set in the middle of the leftmost position, ensuring rotation around the center of the circle*/
background: #fff;
}
.pointer li.hour {
width: 45px;
height: 3px;
margin-top: -1px;
}
.pointer li.min {
width: 60px;
height: 2px;
margin-top: -1px;
}
.pointer li.sec {
width: 90px;
height: 1px;
margin-top: -1px;
background-color: red;
}

CSS clock effect demonstration

/*
* draw Clock tick mark
* @param wrap The parent container of the tick mark
* @param total The total number of tick marks
* @param translateX The offset of the tick mark in the x-axis direction
*/

function drawLines(wrap,total,translateX){
var gap = 360/total;
var strHtml ='';
for (var i = 0; i strHtml = '

/*
* The clock moves, turning the second hand, minute hand, and hour hand
*/
function move(){
var domHour = $(".hour"),
domMin = $(".min"),
domSec = $(".sec");

setInterval(function() {
var now = new Date(),
hour = now.getHours(),
min = now.getMinutes(),
sec = now.getSeconds();

var secAngle = sec*6 - 90, // s*6-90
minAngle = min*6 sec*0.1 - 90, // m*6 s*0.1-90
hourAngle = hour*30 min *0.5 - 90; // h*30 m*0.5 - 90

domSec.css('transform', 'rotate(' secAngle 'deg)');
domMin.css('transform' , 'rotate(' minAngle 'deg)');
domHour.css('transform', 'rotate(' hourAngle 'deg)');

document.title = hour ':' min ' :' sec;

},1000);

}
})


> ;

Final effect: