Home > Developer > Web Develop
There are a few things you need to know before making a clock:
Calculation of point coordinates on a circle
Second, the clock on the hour, minute, second hand conversion
We look at the clock, and the first thing we think about is the angle . Then there is the carry relationship between the second hand, the minute hand, and the hour hand.
For example h time m minutes s seconds, hours, minutes, seconds hand at this moment angle: (-90, is because the rotatez angle rotation rule, the default is from the level, counter-clockwise +, clockwise is-)
ds = s*6-90;
DM = m*6+ (s/60*6)-90;
DH = h*30+ (m/60*30)-90;
1s = 1 / 60min that 1min = 1 / 60h ;5*12=60 a small lattice, and the entire dial is 360° , that is 6° , each small lattice. In other words, the second hand and the minute hand each move, will pass 1 small lattice, walked through 6° , while the hour movement, then walked a large lattice, 5*6°=30° ; therefore, the second and minute hand movement of the base value is 6°, the hour is 30°;1 / 60 * 30° . Therefore, do not overlook the effect of the points against them when calculating the hour angle. (Although the second has the same effect on the minute hand, it's almost impossible to see, so we usually ignore it)Third, JS acquisition time
var date = new Date() given the current time, expressed in milliseconds.getFullYear(), 4-digit yeargetMonth(), from 0-11, respectively, representing January-DecembergetDate(), the number of days in the monthgetDay(), from 0-6, respectively, Sunday-SaturdaygetHours(), 0-23getMinutes(), 0-59getSecond(), 0-59The code is as follows:
<! DOCTYPE html>
<title> production of clock effects </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; /* Base point set in the leftmost middle, guaranteed to rotate 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%);/* Ensure that the number is 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 leftmost middle, guaranteed to rotate 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>
<body>
<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 Clock tick marks
* @param wrap tick mark parent container
* Total number of tick marks @param
* @param the offset of the translateX tick marks in the x-axis direction
*/
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's parent container, modeled after the radial menu principle http://www.cnblogs.com/wuxiaobin/p/4644806.html
* Since the rotation is rotated from the horizontal x-axis, it takes-90
*/
function Drawnumbers (Wrap) {
var radius = wrap.width ()/2;
var strhtml = ';
for (var i=1; i<=12; i++) {
var myangle = (i-3)/6 * MATH.PI; The 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 + = ' <li style= "left: ' + myx + ' px; Top: ' + MyY + ' px ' > ' + i + ' </li> ';
}
Wrap.html (strhtml);
}
/*
* Watch the clock move, turn the second hand, minute hand, 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);
}
})
</script>
</body>
Final effect:
CSS3 Making Clocks
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
