Pendant le processus de génération de l'horloge, j'ai pensé aux façons suivantes d'écrire le cadran:
Bien sûr, il peut être réalisé en utilisant ce modèle, nous devons donc utiliser une meilleure compréhension et le code a un moyen relativement simple de l'implémenter.
1. Utilisez des fonctions trigonométriques
Dans le processus d'utilisation de JS pour organiser le cadran dans les fonctions trigonométriques, j'ai rencontré cette situation: à l'échelle du cadran, lors du calcul des valeurs spécifiques avec des fonctions trigonométriques, l'entier ne peut pas être obtenu, et il doit être arrondi ou vers le bas, il y aura donc des déviations de manière invisible, et ces déviations sont difficiles à ajuster avec les styles. Même si l'effet final peut être atteint, les écarts dans les lacunes et les angles subtils affecteront l'expérience visuelle globale. En tant que développeur de programme, une telle expérience visuelle est difficile à reconnaître par d'autres et à abandonner.
2. Utilisez la couche de masquage
JS utilise une couche de masquage, principalement à l'échelle de cadran. L'échelle de cadran a une longueur et une courte échelle, et toutes les 5 échelles ont une échelle plus longue. De cette façon, la longueur de l'échelle que nous utilisons la couche de masquage est la même, et il est difficile de continuer à ajuster les autres échelles, donc nous abandonnons.
3. Positionnement d'utilisation et (relation père-enfant) (recommandé)
Je pense qu'il est préférable de comprendre et de commencer avec la méthode de positionnement et de relations père-enfant. Je vais le partager avec vous ici. Voici le code d'implémentation:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> </ title> <style media = "écran"> * {margin: 0; rembourrage: 0; } #clock {width: 600px; Hauteur: 600px; Border: 4px Solid Lightgray; marge: auto; Position: relative; Border-Radius: 50%; } #scale {width: 20px; hauteur: 100%; Position: absolue; Gauche: 50%; marge-gauche: -10px; / * arrière-plan: vert; * /} #point {width: 4px; hauteur: 10px; Contexte: LightGray; marge: auto; } #number {width: 20px; hauteur: 20px; marge: 5px; / * Background: Red; * / Font-Size: 20px; Texte-aligne: Centre; hauteur de ligne: 20px; } #hour {width: 12px; hauteur: 180px; Contexte: rouge; Border-Radius: 6px; Transform-Origin: 50% 150px; Position: absolue; En haut: 150px; Gauche: 50%; marge-gauche: -6px; } #Minute {width: 8px; hauteur: 250px; Contexte: Orange; Position: absolue; Border-Radius: 4px; Transform-Origin: 50% 200px; En haut: 100px; Gauche: 50%; marge-gauche: -4px; } #second {width: 4px; Hauteur: 360px; Contexte: rouge; Border-Radius: 2px; Position: absolue; en haut: 0; Gauche: 50%; marge-gauche: -2px; Transform-Origin: 50% 300px; Z-Index: 100; } </ style> </ head> <body> <div id = "horloge"> <div id = "hour"> </ div> <div id = "minute"> </ div> <div id = "second"> </div> </ body> <script type = "text / javascript"> var horloge = document.getElementyid ('horloge'); var hour = document.getElementById ('hour'); var minute = document.getElementById ('minute'); var second = document.getElementById ('second'); Function Surface () {var currentDate = new Date (); var heures = currentDate.Gethours (); var minutes = currentDate.getMinutes (); var seconds = currentDate.getSeconds (); secondes = heures * 3600 + minutes * 60 + secondes; hour.style.transform = 'rotate (' + secondes / 120 + 'deg)'; minute.style.transform = 'rotation (' + secondes * 0,1 + 'deg)'; second.style.transform = 'rotate (' + secondes * 6 + 'deg)'; } setInterval ('Surface ()', 1000); pour (var i = 1; i <61; i ++) {var échelle = document.CreateElement ('div'); Scale.id = 'Scale'; scale.style.transform = 'rotate (' + i * 6 + 'deg)'; Clock.ApendChild (échelle); var point = document.CreateElement ('div'); Point.id = 'Point'; échelle.ApendChild (point); var nombre = document.CreateElement ('div'); Number.id = 'Number'; nombre.style.transform = 'rotate (-' + i * 6 + 'deg)' if (i% 5 == 0) {nombre.innerhtml = i / 5; Point.style.height = '15px'; } Scale.ApendChild (numéro); } </ script> </html>Les notes doivent être payées pendant l'étalonnage:
1. Voici le diagramme de rendu qui est implémenté étape par étape. Enfin, les détails sont étroitement adaptés. Aucune autre méthode n'est utilisée pour l'affiner. Une fois la disposition du style terminée, l'heure actuelle peut être obtenue et corrigée. Il y a un tel problème pendant le processus de correction. J'espère que tout le monde pourra faire attention: l'angle de rotation de la main de l'heure ne peut pas être calculé en unités d'heures. Par exemple: 9:58 Pour le moment, la position du pointage de la main de l'heure est de 9. À 10h00, la position suivante de la main de l'heure saute à la position de 10. Par conséquent, l'angle de la main de l'heure doit être calculé en minutes ou secondes, et l'angle de la main des minutes doit être calculé en minutes ou secondes. La seconde main saute 6 degrés par seconde.
2. Une autre chose à noter est que le centre de rotation des trois pointeurs doit être déterminé à l'aide d'origine transformateur pour déterminer le point de rotation du pointeur.
L'article ci-dessus discute brièvement de la génération d'horloges (JS Handwritten Conce Code) est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.