During the process of generating the clock, I thought of the following ways to write the dial:
Of course, it can be achieved using that pattern, so we need to use a best understanding and the code has a relatively simple way to implement it.
1. Use trigonometric functions
In the process of using js to arrange the dial in trigonometric functions, I encountered this situation: at the scale of the dial, when calculating specific values with trigonometric functions, the integer cannot be obtained, and it needs to be rounded up or down, so there will be some deviations invisibly, and such deviations are difficult to adjust with styles. Even if the final effect can be achieved, the deviations in the subtle gaps and angles will affect the overall visual experience. As a program developer, such visual experience is difficult to be recognized by others and given up.
2. Use masking layer
JS uses masking layer, mainly at the dial scale. The dial scale has length and short, and every 5 scales has a longer scale. In this way, the length of the scale we use masking layer is the same, and it is difficult to continue to adjust the other scales, so we give up.
3. Utilization positioning and (father-child relationship) (recommended)
I think it is best to understand and get started with the method of positioning and father-child relationships. I will share it with you here. Here is the implementation code:
<!DOCTYPE html><html> <head> <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> </head> <body> <div id="clock"> <div id="hour"> </div> <div id="minute"> </div> <div id="second"> </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 * 60 + 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 < 61; 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></html>Notes should be paid during calibration:
1. The following is the rendering diagram that is implemented step by step. Finally, the details are closely matched. No other methods are used to fine-tune it. After the style layout is completed, the current time can be obtained and corrected. There is such a problem during the correction process. I hope everyone can pay attention to: The rotation angle of the hour hand cannot be calculated in units of hours. For example: 9:58 At this time, the position of the hour hand pointing is 9. When 10:00, the following position of the hour hand jumps to the position of 10. Therefore, the angle of the hour hand should be calculated in minutes or seconds, and the angle of the minute hand should be calculated in minutes or seconds. The second hand jumps 6 degrees per second.
2. Another thing to note is that the rotation center of the three pointers must be determined using transform-origin to determine the rotation point of the pointer.
The above article briefly discusses the generation of clocks (js handwritten concise code) is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.