css3 clock making_html/css_WEB-ITnose

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

Get the current time, var date = new Date(), get the current time, expressed in milliseconds.

getFullYear(), 4-digit year

getMonth(), from 0-11, representing January to December respectively

getDate(), the number of days in the month

getDay(), from 0-6, representing Sunday-Saturday respectively

getHours(),0-23

getMinutes(),0-59

getSecond(),0-59

The code is as follows:

< style type="text/css">
body {
font-family: 'Microsoft Yahei';
}
ol,ul {
margin: 0;
padding: 0;
list-style: none;
}
h1 {
margin-top: 40px;
text-align: center;
color: #333;
}

/*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;
}
< /style>

CSS clock effect demonstration

< /ul>





• 
  




• 
  

Final effect: