Faire une horloge en temps réel avec un visage de gradient conique

Les gradies de conception ont été utilisés. Cependant, les gradients coniques, bien que puissants, sont souvent négligés. Ce tutoriel montre la création d'un visage d'horloge unique en tirant parti des capacités des gradients coniques.

Comprendre les gradients coniques

Les gradients coniques créent des transitions de couleurs tournant autour d'un point central, prenant en charge plusieurs valeurs de couleurs. Surtout, la valeur de dans la fonction conic-gradient () définit le point de rotation ou de départ. Cet angle peut même être négatif, une fonctionnalité que nous exploiterons.

 Image d'arrière-plan: gradient conique (de 45Deg, # 6E7DAB, # 5762D5); 

Cet exemple simple présente l'élégance des gradients coniques.

Construire la structure de l'horloge

(Code HTML omis pour la concision, car c'est le balisage de la main d'horloge standard).

Ensuite, nous stylisons l'horloge à l'aide de CSS, en utilisant des variables CSS pour une personnalisation facile. Ces variables seront mises à jour dynamiquement avec JavaScript.

 .clock {/ * Variables d'horloge * / - heures-hand-couleur: # 000; - heures-main-degrés: 0deg; - minuscule-couleur: # 000; - minuscules-main-degrés: 0deg; - seconde main-couleur: hotpink; - seconde-main degrés: 0deg; Position: relative; largeur min: 320px; Largeur: 25VW; hauteur: 25vw; Min-Height: 320px; Border-Radius: 50%; marge: 0 auto; Border: 7px solide # 000; } / * Styles de mains d'horloge * / .hand {/ * ... (styles de main omis pour la brièveté) ... * /} 

La propriété transform-origin garantit une rotation correcte de la main. Propriétés personnalisées Gérer les angles de main, mis à jour via JavaScript pour un chronométrage précis.

Implémentation de la logique JavaScript

Nous sélectionnons l'élément d'horloge et définissons la fonction setDate () :

 const Clock = Document.getElementyId ("horloge"); fonction setDate () {// Calcul de temps et mises à jour d'angle de main} setDate (); // Configuration initiale  Pre> <p> à l'intérieur <code> setDate () </code>, nous calculons les angles de main à l'aide de <code> date () </code>: </p> <pre class="brush:php;toolbar:false"> const Now = new Date (); const secondSangle = now.getSeconds () * 6; const minsangle = now.getMinutes () * 6 secondsangle / 60; const hourangle = ((maintenant.gethours ()% 12) / 12) * 360 minsangle / 12; 

Les calculs garantissent un positionnement précis, en tenant compte des secondes, des minutes et des heures. Nous mettons ensuite à jour les variables CSS:

 horloge.style.setproperty ("- second-main degrés", secondsangle "deg"); Clock.style.setProperty ("- Minute-Hand-Degees", Minsangle "Deg"); Clock.style.setproperty ("- hour-hand-degrees", hourangle "deg"); 

Enfin, setInterval (setDate, 1000) met à jour l'horloge chaque seconde.

Intégration du gradient de conique

Pour intégrer le gradient conique, nous modifions le Code> pour intégrer le gradient conique, nous Modifions le <code>. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> .clock {/ * ... (styles précédents) ... * / --start: 0deg; --end: 0deg; Contexte: Gradient conique (de var (- démarrage), RGB (255 255 255) 2deg, RGB (0 0 0 / 0,5) var (- end), RGB (255 255 255) 2deg, RGB (0 0 0 / 0,7)); } </pre><div class="contentsignin">Copier après la connexion</div></div> <p> Nous introduisons <code> - start et - end variables pour contrôler les angles de démarrage et de fin du gradient. La fonction setDate () est mise à jour pour calculer et définir ces variables, gérer les cas où MinSangle dépasse hourangle en utilisant des angles négatifs pour les transitions sans couture. (Code JavaScript pour les calculs d'angle de gradient omis pour la concision, car il s'agit d'une mise à jour simple des variables - start et - end basées sur minsangle et hourangle ).

Ceci termine l'horloge avec une face de gradient conique dynamique. Expérimentez avec différents schémas et styles de couleurs pour créer vos propres conceptions d'horloge uniques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!