Home > Developer > JavaScript
Css3 clock creation, css3 clock
Knowledge about clock preparation:
I. Calculation of point coordinates on a circle
Ii. Conversion of the hour, minute, and second hands on the clock
Let's look at the clock. The first thing we think of isAngle. Second-hand, minute-hand, hour-handCarryLink.
For example, h, m, s, hour second minute Hour hour minute -)
Ds = s * 6-90;
Dm = m * 6 + (s/60*6)-90;
Dh = h * 30 + (m/60*30)-90;
Iii. js acquisition time
var date = new Date()To obtain the current time, in milliseconds.getFullYear(), 4-digit yeargetMonth(), From 0-11, indicating 1-12 monthsgetDate(), Number of days in the monthgetDay()From 0 to 6, indicating Sunday to SaturdaygetHours(), 0-23getMinutes(), 0-59getSecond(), 0-59The Code is as follows:
<! DOCTYPE html>
<Html lang = "zh-cn">
<Head>
<Title> clock effect creation </title>
<Meta charset = "UTF-8"/>
<Meta name = "keywords" content = ""/>
<Meta name = "description" content = ""/>
<Script type = "text/javascript" src = "jquery. js"> </script>
<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 center to ensure rotation around the center */
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%);/* center the number */
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;/* The base point is set in the leftmost center to ensure rotation around the center */
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>
</Head>
<Body>
<H1> CSS clock effect demonstration
<Div class = "clock">
<Ul class = "line-min"> </ul>
<Ul class = "line-hour"> </ul>
<Ol class = "number"> </ol>
<Ul class = "pointer">
<Li class = "hour"> </li>
<Li class = "min"> </li>
<Li class = "sec"> </li>
<Li class = "circle"> </li>
</Ul>
</Div>
<Script type = "text/javascript">
$ (Document). ready (function (){
Function init (){
DrawLines ($ ('. line-min'), 60, 85 );
DrawLines ($ ('. line-hour'), 12, 80 );
DrawNumbers ($ ('. number '));
Move ();
}
Init ();
/*
* Draw a clock dial
* @ Param wrap parent container of the dial line
* @ Param total the total number of dial lines
* @ Param translateX offset of the dial line in the X axis
*/
Function drawLines (wrap, total, translateX ){
Var gap = 360/total;
Var strHtml = '';
For (var I = 0; I <total; I ++ ){
StrHtml + = '<li style = "transform: rotate (' + (I * gap) + 'deg) translate ('+ translateX + 'px,-50%) "> </li> ';
};
Wrap.html (strHtml );
}
/*
* Draw clock numbers
* @ Param wrap number parent container, modeled on radial menu principle http://www.cnblogs.com/wuxiaobin/p/4644806.html
* Since the rotation starts from the horizontal X axis,-90 is required.
*/
Function drawNumbers (wrap ){
Var radius = wrap. width ()/2;
Var strHtml = '';
For (var I = 1; I <= 12; I ++ ){
Var myAngle = (I-3)/6 * Math. PI; // original formula angle => radian (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 + = '<li style = "left:' + myX + 'px; top: '+ myY + 'px">' + I + '</li> ';
}
Wrap.html (strHtml );
}
/*
* The clock moves around, and the second, minute, and hour hands are rotated.
*/
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 );
}
})
</Script>
</Body>
</Html>
Final effect:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
