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:

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;
}

CSS clock effect demonstration

• li>
  
• 
  
• 
  
• 
  

/*
* 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 = '

';
};
wrap.html(strHtml);
}

/*
* Draw clock numbers
* @param wrap The parent container of numbers, modeled on the radial menu principle http://www.cnblogs.com/wuxiaobin/p/4644806.html
* Since the rotation starts from the horizontal x-axis, -90
*/
function drawNumbers(wrap){
var radius = wrap.width() / 2;

var strHtml = '';
for(var i=1; i var myAngle = (i-3)/6 * Math.PI; //Original formula angle =>radians (i*30-90)*(Math.PI/180) => (i-3)/6 * Math.PI ;

var myX = radius radius*Math.cos(myAngle), // x=r rcos(θ)
myY = radius radius*Math.sin(myAngle); // y=r rsin (θ)

strHtml = '

' i '

';
}
wrap.html(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: