Home > Developer > Web Develop
In the process of generating the clock, I think of the layout of the dials in such several ways:
Of course the use of that pattern can be achieved, so we have to use a best understanding, the code has a relatively simple way to achieve
1. Using Trigonometric functions
Use JS in the trigonometric functions to decorate the dial in the process of encountering this situation: it is at the dial of the scale, the use of trigonometric functions to calculate the specific value can not be an integer, need to be rounded up or down, so that there will be a slight deviation, and such deviations difficult to use the style to adjust in place, even if the final effect can be But the subtle gaps and angle deviations will affect the overall visual experience, as a program developer, such a visual experience is difficult for others to recognize, give up.
2. Using Mask Layer
JS use mask layer, mainly in the dial of the scale, the dial has a long and short scale, every 5 ticks have a longer scale, so that we use the Mask layer cover the length of the scale is consistent, it is difficult to continue to adjust the rest of the scale so also give up.
3, the use of positioning and (parent-child relationship) (recommended)
Using the method of location and parent-child relationship I think it's best to understand and get started and share it here for everyone. Here is the implementation code:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<style media= "Screen" >
* {
margin:0;
padding:0;
}
#clock {
width:600px;
height:600px;
BORDER:4PX solid lightgray;
Margin:auto;
position:relative;
border-radius:50%;
}
#scale {
width:20px;
height:100%;
Position:absolute;
left:50%;
Margin-left: -10px;
/*background:green;*/
}
#point {
width:4px;
height:10px;
Background:lightgray;
Margin:auto;
}
#number {
width:20px;
height:20px;
margin-top:5px;
/*background:red;*/
font-size:20px;
Text-align:center;
line-height:20px;
}
#hour {
width:12px;
height:180px;
background:red;
border-radius:6px;
transform-origin:50% 150px;
Position:absolute;
top:150px;
left:50%;
Margin-left: -6px;
}
#minute {
width:8px;
height:250px;
Background:orange;
Position:absolute;
border-radius:4px;
transform-origin:50% 200px;
top:100px;
left:50%;
Margin-left: -4px;
}
#second {
width:4px;
height:360px;
background:red;
border-radius:2px;
Position:absolute;
top:0;
left:50%;
Margin-left: -2px;
transform-origin:50% 300px;
z-index:100;
}
</style>
<body>
<div id= "Clock" >
<div id= "Hour" >
</div>
<div id= "Minute" >
</div>
<div id= "Second" >
</div>
</div>
</body>
<script type= "Text/javascript" >
var clock = document.getElementById (' clock ');
var hour = document.getElementById (' hour ');
var minute = document.getElementById (' minute ');
var second = document.getElementById (' second ');
function surface () {
var currentdate = new Date ();
var hours = currentdate.gethours ();
var minutes = currentdate.getminutes ();
var seconds = currentdate.getseconds ();
seconds = hours * 3600 + minutes * + seconds;
Hour.style.transform = ' rotate (' +seconds/120+ ' deg) ';
Minute.style.transform = ' rotate (' +seconds * 0.1+ ' deg) ';
Second.style.transform = ' rotate (' +seconds * 6+ ' deg) ';
}
SetInterval (' surface () ', 1000);
for (var i = 1; i <; i++) {
var scale = document.createelement (' div ');
scale.id = ' scale ';
Scale.style.transform = ' rotate (' +i * 6+ ' deg) ';
Clock.appendchild (scale);
var point = document.createelement (' div ');
point.id = ' point ';
Scale.appendchild (point);
var number = document.createelement (' div ');
Number.id = ' number ';
Number.style.transform = ' rotate (-' +i * 6+ ' deg) '
if (i% 5 = = 0) {
number.innerhtml = I/5;
Point.style.height = ' 15px ';
}
Scale.appendchild (number);
}
</script>
Attention to correction:
1, the following is a step to achieve, at the end of the details of the close fit, no other way in her fine-tuning, when the layout of the full completion of the current time to get the correction, in the process of correction there is such a problem, I hope you can note: The rotation angle of the hour can not be calculated in hours, for example: 9 : 58 At this point the position of the hand is 9, when 10:00, the hour below to jump to the position of 10, so the angle of the hour hand in minutes or seconds to calculate, the minute hand angle jumps to be measured in minutes or seconds, the second hand is 6 degrees per second.
2, there is a point to note, three pointer rotation center problem, using Transform-origin to set the pointer rotation point must be Dingzhun
On the Generation of clocks (JS handwritten code)
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
