Verwenden Sie CSS+Native JS, um einfache Uhren zu erstellen. Der Effekt ist wie folgt
Um diesen Effekt zu erreichen, ist es in drei Hauptteile unterteilt: HTML, JavaScript und CSS
HTML -Teil
Der HTML -Teil ist relativ einfach und definiert eine Takt -Div, die den Ursprung, die Stunde, die Minute, das zweite Hand, das Datum und die Uhrzeit hat. Was die Skalen, Zahlen und andere Elemente auf der Uhr betrifft, da die Menge relativ groß ist, wird sie unter Verwendung von JVAscript unter Verwendung von JVAscript erzeugt.
<! docType html> <html> <head> <meta charset = "utf-8"> <link rel = 'styleSheet' href = 'external CSS-Datei Pfad id = "stündelige line"> </div> <div id = "minute-line"> </div> <div id = "Second-Line"> </div> <!-Datum-> <div id = "Date-info"> </div> <!-Zeit-> <div> <div> <div id = "stunde-time"> </div id = "winus-time"> </</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</Div) " </div> <script type = 'text/javaScript' src = 'externer JavaScript -Dateipfad'> </script> </body> </html>
CSS -Teil
Vor dem Start des Code gibt es einige Eigenschaften von CSS, die verstanden werden müssen, wie Positionierung, Grenzradius, Transformation usw.
Positionattribute
Das Positionsattribut gibt den Positionstyp eines Elements mit fünf Werten an: absolut, fest, relativ, statisch, erben. Der Standard ist statisch, dh es gibt keine Positionierung, und die Elemente werden gemäß dem normalen Dokumentfluss angezeigt. Die Hauptnutzungen hier sind absolut und relativ
Absulatewert, das Element auf die absolute Positionierung festlegen und sie relativ zu dem ersten oberen Element, das unerwartet statisch positioniert wurde, positioniert. Die Position kann durch die 'linken', 'oben', 'rechts', 'unteren' Attribute positioniert werden; Wenn das obere Element alle statisch positioniert ist, wird es relativ zur Position des Körperelements positioniert.
Setzen Sie in diesem Beispiel den äußersten Div -Takt auf relativ, und alle unteren Elemente werden auf die absolute absolute Positionierung eingestellt und bestimmen dann die Position relativ zum Takt, indem die Werte von Attributen wie links und oben festgelegt werden.
Border-Radius-Attribut
Das Border-Radius-Attribut fügt einem Element einen abgerundeten Rand hinzu. Sie können die Größe von vier abgerundeten Ecken festlegen. Verwenden Sie in diesem Beispiel dieses Attribut, um das Taktelement auf einen Kreis zu setzen
Hier ist ein Beispiel: 4 Divelemente, alle Breite und Höhe sind 100px, und die Auswirkungen von Grenzradius sind unterschiedlich:
Transformation Attribut
Die Transformationseigenschaft wendet eine 2D- oder 3D -Rotation auf ein Element an, mit dem wir das Element drehen, skalieren, bewegen oder neigen können. In diesem Beispiel werden die Stunde, Minute, Sekunde, Skala usw. unter Verwendung des Transformationsattributs gedreht. Darüber hinaus kann das Transform-Origin-Attribut die Basispositionsposition des Elements festlegen.
Der Code für den CSS -Teil
/*Global*/*{Margin: 0; Polsterung: 0;}. Uhr {Breite: 400px; Höhe: 400px; Grenze: 10px fest #333; Box-Shadow: 0px 0px 20px 3px #444 Einschub; Grenzradius: 210px; Position: Relativ; Rand: 5px Auto; Z-Index: 10; Hintergrundfarbe:#f6f6f6;}/* Taktnummer*/. Clock-num {width: 40px; Höhe: 40px; Schriftgröße: 22px; Text-Align: Mitte; Zeilenhöhe: 40px; Position: absolut; Z-Index: 8; Farbe:#555; Schriftfamilie: Fantasy, 'Trebuchet ms';}. em_num {font-size: 28px;}/* pointer*/. clock-line {Position: absolut; Z-Index: 20;}. Hour-Line {Breite: 100px; Höhe: 4px; Top: 198px; links: 200px; Hintergrundfarbe:#000; Border-Radius: 2PX; Transform-Origin: 0 50%; Box-Shadow: 1PX -3px 8px 3px #aaa;}. Minute-Line {Breite: 130px; Höhe: 2px; Top: 199px; Links: 190px; Hintergrundfarbe:#000; Transform-Origin: 7,692% 50%; Box-Shadow: 1px -3px 8px 1px #aaa;}. Second-Line {Breite: 170px; Höhe: 1PX; Top: 199,5px; Links: 180px; Hintergrundfarbe:#F60; Transform-Origin: 11,765% 50%; Box -shadow: 1px -3px 7px 1px #bbb;}/* Origin*/. Origin {width: 20px; Höhe: 20px; Border-Radius: 10px; Hintergrundfarbe:#000; Position: absolut; Top: 190px; Links: 190px; Z-Index: 14;}/* Datumszeit*/. Date-info {width: 160px; Höhe: 28px; Zeilenhöhe: 28px; Text-Align: Mitte; Position: absolut; Oben: 230px; Links: 120px; Z-Index: 11; Farbe:#555; Schriftgewicht: fett; Schriftfamilie: 'Microsoft Yahei';}. Time-Info {width: 92px; Höhe: 30px; Zeilenhöhe: 30px; Text-Align: Mitte; Position: absolut; Oben: 270px; links: 154px; Z-Index: 11; Hintergrundfarbe:#555; Polsterung: 0; Box-shadow: 0px 0px 9px 2px #222 Einschub;}. Zeit {width: 30px; Höhe: 30px; Text-Align: Mitte; float: links; Farbe: #fff; Schriftgewicht: BOLD;} #Minute-Time {Border-Links: 1PX Solid #ffff; Border-Rechts: 1PX Solid #ffff;}/* Skala*/. Clock-Scale {Breite: 195px; Höhe: 2px; Transform-Origin: 0% 50%; Z-Index: 7; Position: absolut; Top: 199px; links: 200px;}. scale-show {width: 12px; Höhe: 2px; Hintergrundfarbe:#555; float: links;}. Skalierende {Breite: 183px; Höhe: 2px; float: links;}JavaScript -Teil
Über den JS -Teil gibt es nichts zu sagen. Für einfache DOM -Operationen wird die SetInterval -Funktion in jeder Sekunde ausgeführt, und der Winkel des Zeigers und die Anzeigezeit werden gerade geändert. Der Code ist wie folgt
(function () {window.onload = initnumxy (200, 160, 40,40); var hour_line = document.getElementById ("stündliche Leitung"); var winus_line = document.getElementById ("Minute-Line"); var second_line = document.getElementById ("Second-Line") var dadinfo = document. "Sonntag", "Montag", "tue", "tue", "freitag", "sunday", "sunday", "tue", "freitag", "sunday", "sunday", "sunday", "sunday", "sunday", "sunday 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday' 'Saturday' ]; var hour_time = document.getElementById ("Stundenzeit"); this_day.getMinutes (); + 1); Second_line.Style.Transform = 'rotate (' + 6-90) + 'Deg)'; this_day.gethours (); } setInterval (setTime, 1000); }. w, "top" : R + 0.5 * r * 1.732 - 0.5 * h }, { "left" : R - 0.5 * w, "top" : R + 0.5 * r * 1.732 - 0.5 * h }, { "left" : R - 0.5 * r - 0.5 * w, "top" : R + 0.5 * r * 1.732 - 0.5 * h }, { "left" : R - 0.5 * r - 0.5 * w, "top" : R + 0.5 * r * 1.732 - 0.5 * h }, { "left" : R - 0.5 * r * 1.73205 - 0.5 * w, "top" : R + 0.5 * r - 0.5 * h }, { "left" : R - 0.5 * r - 0.5 * h }, { "left" : R - 0.5 * r * 1.73205 - 0.5 * w, "top" : R - 0,5 * r - 0,5 * H}, {"links": r - 0,5 * r - 0,5 * H}, {"links": r - 0,5 * r - 0,5 * w, "top": r - 0,5 * r * 1,73205 - 0,5 * H}, {"links": r - 0,5 * r - 0,5 * w, "top": r - 0.5 * r - 0,5 * 1.7305 - 0.5 * W, "Top": r - 0.5 * r - 0.5 * 1.7305 - 0.5 * W, "Top". "links": r - 0,5 * r - 0,5 * H}, {"links": R - 0,5 * R - 0,5 * W, "Top": R - 0,5 * R * 1,73205 - 0,5 * H}, {"links": r - 0,5 * W, "Top": r - r - 0.5 * H}]; i ++) {if (i%3 == 0) {clock.innerHtml += "<div class = 'clock-num em_num'>" +i +"</div>"; für (var i = 0; i <taca_num.length; i ++) {clock_num [i] .style.left = numxy [i] .left+'px'; class = 'clockscale'> " +" <div class = 'scale-versteckte'> </div> " +" <div class = 'scale-show'> </div> " +" </div> ";} var scaste = document.getElementsByClassname (" Takt-Scale "); für (var i = 0; i <scale.lenght; * 6 - 90) + "Deg)";Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.