Un autre effet d'horloge arrive. Cette implémentation ne nécessite pas de toile, elle est dessinée par Div, UL et Li, ce qui est amusant et réaliste.
Haha ~
Le JS dont vous avez besoin pour réaliser cet effet de déplacement, mais il n'y a pas beaucoup de contenu dans JS, donc ce n'est pas difficile.
C'est principalement l'idée d'utiliser la transformation dans CSS. Transform a de nombreux attributs changeants et des horloges ordinaires
C'est une chose ronde dans mon esprit. Alors, puis-je faire pivoter cette propriété (tourner) pour l'implémenter? Son échelle
En utilisant la rotation et le réglage du point de rotation au centre du cercle, ne serait-il pas possible de tourner le centre du cercle? Le bas de la main d'heure n'est pas
Le centre du cercle est-il en contact? Ensuite, il serait acceptable de régler le bas de la main de l'heure sur le point de rotation. Je parle à peu près de mes idées.
Code:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tight> transform </tapie> <style id = "css"> #clock {width: 200px; hauteur: 200px; Border: 2px solide # 000; Border-Radius: 50%; marge: 100px auto 0; Position: relative; } #clock ul {width: 200px; hauteur: 200px; Position: relative; Style de liste: aucun; rembourrage: 0; marge: 0; } #clock ul {width: 200px; hauteur: 200px; Position: relative; Style de liste: aucun; rembourrage: 0; marge: 0; } #clock ul {width: 2px; hauteur: 10px; Contexte: # 000; Transform-Origin: Centre 100px; Position: absolue; en haut: 0; Gauche: 50%; } #clock ul li: nth-of-type (5n + 1) {hauteur: 20px; } #hour {hauteur: 40px; Largeur: 4px; Contexte: # 00FEFE; Position: absolue; En haut: 60px; Gauche: 99px; Transform-Origin: bas du bas; } #min {hauteur: 60px; Largeur: 3px; Contexte: # 001AFE; Position: absolue; en haut: 40px; Gauche: 99px; Transform-Origin: bas du bas; transformée: tournure (15deg); } #sec {hauteur: 70px; Largeur: 2px; Contexte: # 000; Position: absolue; En haut: 30px; Gauche: 99px; Transform-Origin: bas du bas; } #dot {width: 10px; hauteur: 10px; Position: absolue; Gauche: 95px; En haut: 95px; Contexte: #AAA; Border-Radius: 50%; } </ style> </ head> <body> <div id = "horloge"> <ul> </ul> <div id = "hour"> </ div> <div id = "min"> </ div> <div id = "sec"> </v> <div id = "dot"> </div> </ div> <cript> var ocrss = document.getElementyId ("css"); var oclock = document.getElementById ("horloge"); var oul = oclock.getElementsByTagName ("ul") [0]; var ohour = document.getElementById ("hour"); var omin = document.getElementById ("min"); var osec = document.getElementById ("sec"); var strli = ""; var strcss = ""; pour (var i = 0; i <60; i ++) {strli + = "<li> </li>"; } oul.innerhtml = strli; pour (var i = 0; i <60; i ++) {strcss + = '# horloge ul li: nth-of-type (' + (i + 1) + ') {transform: rotate (' + i * 6 + 'deg);}'; } OCSS.InnerHtml + = Strcss; temps(); setInterval (temps, 1000); Fonction Heure () {var Date = new Date (); var h = date.Gethours (); var m = date.getMinutes (); var s = date.getSeconds (); ohour.style.transform = "rotate (" + (h + m / 60) * 30 + "deg)"; omin.style.transform = "rotation (" + (m + s / 60) * 6 + "deg)"; OSEC.STYLE.TRANSFORM = "Rotate (" + S * 6 + "Deg)"; } </ script> </ body> </html>La chose la plus importante dans le dessin avec des balises est le positionnement, car de cette manière, nous pouvons mettre la boîte qui a été formée en forme dans la position que vous souhaitez. La feuille de style CSS interne peut être obtenue en obtenant des éléments, afin que vous puissiez y ajouter des styles en utilisant InnerHTML et les ajouter dans une boucle. Il existe également de nombreuses échelles, vous pouvez donc utiliser la boucle pour ajouter, ce qui permet d'économiser du temps et des efforts. Quant au temps restant, vous pouvez exécuter la fonction toutes les 1 secondes, afin qu'elle se déplace.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.