Pfeiluhr mit CSS3. Digitaluhr in CSS3 und jQuery So fügen Sie eine Uhr zu HTML hinzu
Dies ist ihr Hauptskript:
200? 200px: + (this.scrollHeight + 5) + px);\u003e 00:00:00
Ganz oben sehen wir:
200? 200px: + (this.scrollHeight + 5) + px);\u003e 00:00:00
Fügen Sie einfach fetten Text und gelben Farbton und Pfeile hinzu.
200? 200px: + (this.scrollHeight + 5) + px);\u003e « 00:00:00»
Und genau das ist passiert:
Sie sehen also selbst, wie sich alles verändert hat, und jetzt können Sie alles selbst tun und es wunderschön an Ihre Stile anpassen. Dass andere nicht gemacht werden können, weil es Flash gibt, dass sie nicht hier sind.
Jetzt zusätzlich zur Uhr auf Flash
200? 200px: + (this.scrollHeight + 5) + px);\u003e
Sie können also auswählen, welche Ihnen am besten gefällt und welche Sie verwenden möchten, da einige im Block installiert werden können, die ersten jedoch besser, da sie flexibel und anpassbar sind, was jeder tun kann.
Dies ist ein einfaches Skript, das die Systemzeit in JavaScript im Klartext anzeigt. Stunden, Minuten und Sekunden durch einen Doppelpunkt getrennt - das ist alles.
Um Ihren eigenen Stil für die Uhr festzulegen, reicht es aus, den Stil für den Block mit der ID - #time zu definieren. In CSS können Sie Ihre eigene Schriftart für die Uhr, ihre Farbe und Größe festlegen. Wenn Sie keine einfache, sondern komplexere Uhr benötigen, sehen Sie sich die Flash-Uhr für die Site an. Woher bezieht das Skript die Zeitdaten? Die angezeigte Zeit ist genau die am Gerät eingestellte.
Installation
Fügen Sie den folgenden Code überall dort ein, wo Sie die Uhr auf der Site sehen möchten. Auf uCoz kann dies beispielsweise "Oben" oder "Unten der Site" sein:
200? 200px: + (this.scrollHeight + 5) + px);\u003e
00:00:00
Das Skript zeigt sofort an der Stelle, an der Sie es installiert haben, eine Textzeile mit einer Uhr an. Zum Beispiel, "00:00:00"... Sekunden, Minuten und Stunden sind übrigens immer zweistellig, sodass die Änderung der Werte reibungslos verläuft.
Wir haben bereits die Erstellung einer analogen Uhr mit CSS und JavaScript behandelt. In diesem Tutorial erstellen wir dieselbe Uhr mit CSS3, um zu sehen, wie der neue Standard die Art und Weise ändert, wie wir verschiedene Effekte entwerfen. Die Demo für dieses Lernprogramm funktioniert nur in Browsern, die die CSS3-Eigenschaft unterstützen drehen(Demo funktioniert nicht in IE6).
CSS3-Transformation: drehen
Transformieren: drehen - Eine neue CSS 3-Eigenschaft, mit der Sie verschiedene Elemente drehen können. Mithilfe von Transformationen können Sie auch die Skalierung von Elementen ändern, Verzerrungen horizontal und vertikal einführen und Elemente auf der Webseite verschieben. All dies kann mit der Eigenschaft animiert werden Überleitung(mit verschiedenen Arten von Übergängen und Dauer).
Die gleichen Schritte zum Animieren von Seitenelementen können mit einer JavaScript-Bibliothek (z. B. jQuery) ausgeführt werden. Natürlich kann jQuery viel mehr zu ändernde CSS-Eigenschaften animieren als mit Überleitung... JQuery ist jedoch ein integriertes CSS-Tool. JavaScript-Bibliotheken sind externe Tools, die möglicherweise nicht verfügbar sind. In jedem Fall eröffnet CSS3 neue vielversprechende Richtungen für die Entwicklerentwicklung.
Grafik
Zunächst müssen Sie eine grafische Oberfläche für die Uhr erstellen. Wir werden eine Basis und drei Pfeile haben. Alle beweglichen Teile werden in Photoshop auf 600 Pixel Höhe und 30 Pixel Breite geschnitten und vertikal positioniert. Standardmäßig ist dies die Eigenschaft drehen Dreht das Element um die Mitte. Kann Eigenschaft verwenden transformationsursprung um den Drehpunkt auf einen anderen Punkt zu setzen.
Jedes Bild kann als Basis der Uhr verwendet werden. Die beweglichen Teile sind PNG-Bilder mit Transparenz.
Das Demo-Quellcode-Archiv enthält eine PSD-Datei, die alle Bilder enthält.
HTML-Markup
Das Uhrlayout ist eine einfache ungeordnete Liste. Jedes Listenelement enthält ein bewegliches Teil und eine entsprechende ID:
CSS
#clock (Position: relativ; Breite: 600px; Höhe: 600px; Rand: 20px auto 0 auto; Hintergrund: url (clockface.jpg); Listenstil: keine;) #sec, #min, #hour (Position: absolut) ; Breite: 30px; Höhe: 600px; Oberseite: 0px; links: 285px;) #sec (Hintergrund: URL (sechand.png); Z-Index: 3;) #min (Hintergrund: URL (minhand.png); z -index: 2;) #hour (Hintergrund: url (hourhand.png); z-index: 1;)
Das CSS ist auch ganz einfach. Da die beweglichen Teile die gleiche Größe und den gleichen Startpunkt haben, können wir sie zusammen deklarieren, um Wiederholungen zu vermeiden. Element ul erhält eine relative Positionierung, die eine absolute Positionierung der darin enthaltenen Pfeile ermöglicht.
CSS3 wird mit einem kleinen jQuery-Code angewendet.
JavaScript
- Wir haben stundenlang Zeit
- Berechnen und fügen Sie CSS-Stile (Drehwinkel) für jedes Element ein.
- Aktualisieren Sie die CSS-Stile in regelmäßigen Abständen.
Es ist zu beachten, dass jQuery mit den neuen CSS3-Eigenschaften hervorragend funktioniert. Da Stile dynamisch hinzugefügt werden, wird die CSS-Datei als CSS2.1 validiert!
Wir bekommen Zeit
Die Zeit kann auch mit PHP-Code abgerufen werden, dies ist jedoch die Serverzeit. Und JavaScript gibt die Ortszeit des Benutzers zurück.
Wir erhalten Informationen mit Datum () und setzen Sie alle unsere Variablen. Wir werden entsprechend verwenden GetSeconds (), GetMinutes () oder GetHours () zum Datum () um Sekunden, Minuten und Stunden einzustellen:
Var Sekunden \u003d neues Datum (). GetSeconds ();
In der obigen Zeile wird eine Zahl aus dem Bereich von 0 bis 59 erhalten und einer Variablen zugewiesen sekunden.
Bestimmen Sie den Winkel
Dann müssen Sie den Drehwinkel für jeden Pfeil berechnen. Für den Sekunden- und Minutenzeiger, die 60 Positionen auf dem Stundenkreis haben, müssen wir 360 Grad durch 60 teilen, was uns die Zahl 6 gibt. Das heißt, jede Sekunde oder Minute entspricht einer Drehung um 6 Grad. Wir werden das Berechnungsergebnis in einer anderen Variablen speichern. Für Sekunden sieht der Code folgendermaßen aus:
Var sdegree \u003d Sekunden * 6;
Für Stunden werden die Berechnungen unterschiedlich sein. Da wir ein Zifferblatt mit 12 Positionen für den Stundenzeiger haben, entspricht jede Stunde einem Drehwinkel von 30 Grad (360/12 \u003d 30). Der Stundenzeiger muss sich jedoch in einem Zwischenzustand befinden, dh er muss sich mit jeder Minute bewegen. Das heißt, um 4:30 Uhr sollte der Stundenzeiger auf halbem Weg zwischen 3 und 4 Uhr sein. So machen wir das:
Var hdegree \u003d Stunden * 30 + (Minuten / 2);
Das heißt, wir addieren zum Drehwinkel durch die Anzahl der Stunden auch den Wert der Division der Anzahl der Minuten durch 2 (was einen Wert im Bereich von 0,5 bis 29,5 ergibt). Somit wird der Stundenzeiger um einen Winkel von 0 bis 30 Grad "gedreht" (stündliches Inkrement).
Zum Beispiel:
2 Stunden 40 Minuten -\u003e 2 * 30 \u003d 60 Grad und 40/2 \u003d 20 Grad. Gesamt: 80 Grad.
Es kann davon ausgegangen werden, dass die Uhr dies nach 12 Uhr mittags anzeigt, da der Rotationswert mehr als 360 Grad beträgt. Aber alles funktioniert gut.
Wir sind jetzt bereit, die CSS-Regeln einzufügen.
Stil einstellen
So sieht eine CSS3-Regel aus drehen im Stylesheet:
#sec (-webkit-transform: drehen (45 Grad); -moz-transform: drehen (45 Grad);)
Und so wird der Code mit jQuery eingefügt:
$ ("# sec"). css (("- Moz-Transformation": "drehen (45 Grad)", "Webkit-Transformation": "drehen (45 Grad)"));
Das einzige Problem besteht darin, den resultierenden Winkelwert in der Variablen "sdegree" auf die Syntax anstatt auf 45 Grad zu setzen. Sie müssen eine Zeichenfolge in einer anderen Variablen erstellen srotate und ersetzen Sie das zweite Argument vollständig. So:
Var srotate \u003d "drehen (" + Grad + "Grad)";
Und der jQuery-Code sieht folgendermaßen aus:
$ ("# sec"). css (("- moz-transform": srotate, "-webkit-transform": srotate));
Alles zusammenfügen
Der jQuery-Code würde folgendermaßen aussehen:
$ (document) .ready (function () (setInterval (function () (var Sekunden \u003d neues Datum (). getSeconds (); var sdegree \u003d Sekunden * 6; var srotate \u003d "drehen (" + sdegree + "deg)" ; $ ("# sec"). css (("- moz-transform": srotate, "-webkit-transform": srotate));), 1000); setInterval (function () (var Stunden \u003d neues Datum () .getHours (); var mins \u003d neues Datum (). getMinutes (); var hdegree \u003d Stunden * 30 + (Minuten / 2); var hrotate \u003d "drehen (" + hdegree + "deg)"; $ ("# Stunde ") .css ((" - moz-transform ": hrotate," -webkit-transform ": hrotate));), 1000); setInterval (function () (var mins \u003d new Date (). getMinutes (); var mdegree \u003d min * 6; var mrotate \u003d "drehen (" + mdegree + "deg)"; $ ("# min"). css (("- moz-transform": mrotate, "-webkit-transform": mrotate) );), 1000);));
Wir verwenden die JavaScript-Funktion setIntervalum die Stile jede Sekunde zu aktualisieren. Variablen, die Zeitwerte erhalten, müssen darin aktualisiert werden. Andernfalls wird die Uhr zu unbrauchbarem Müll auf der Seite.
Fazit
Diese Lektion zeigt die praktische Anwendung der Eigenschaft drehen nicht mit Design verbunden.
Lassen Sie uns eine elektronische Uhr mit Datum und Uhrzeit erstellen jQuery und CSS3 für eine kleine Animation.
Html
Das Markup ist einfach und flexibel. Wir erstellen DIV mit Klasse uhr, DIV mit Klasse DatumDaraufhin werden ein Datum und eine ungeordnete Liste mit Stunden, Minuten und Sekunden angezeigt.
CSS
Stile mit einer kleinen Animation:
Container (Breite: 960 Pixel; Rand: 0 automatisch; Überlauf: ausgeblendet;) .clock (Breite: 800 Pixel; Rand: 0 automatisch; Polsterung: 30 Pixel; Rand: 1 Pixel durchgehend # 333; Farbe: #fff;) #Date (font- Familie: Arial, Helvetica, serifenlos; Schriftgröße: 36px; Textausrichtung: Mitte; Textschatten: 0 0 5px # 00c6ff;) ul (Breite: 800px; Rand: 0 automatisch; Auffüllen: 0px; Listen- Stil: keine; Textausrichtung: Mitte;) ul li (Anzeige: Inline; Schriftgröße: 10em; Textausrichtung: Mitte; Schriftfamilie: Arial, Helvetica, serifenlos; Textschatten: 0 0 5px # 00c6ff;) #point (Position: relativ; -moz-animation: mymove 1s leicht unendlich; -webkit-animation: mymove 1s leicht unendlich; padding-left: 10px; padding-right: 10px;) @ -webkit-keyframes mymove ( 0% (Deckkraft: 1,0; Textschatten: 0 0 20px # 00c6ff;) 50% (Deckkraft: 0; Textschatten: keine;) 100% (Deckkraft: 1,0; Textschatten: 0 0 20px # 00c6ff;) ) @ -moz-keyframes mymove (0% (Deckkraft: 1,0; Textschatten: 0 0 20px # 00c6ff;) 50% (Deckkraft: 0; Textschatten: keine;) 100% (Deckkraft: 1,0; Textschatten : 0 0 20px # 00c6ff;))
Js
Wir verbinden uns jQuery Bibliothek
Und dann unser Drehbuch
- neues Datum () - erstellt ein neues Objekt Datum mit dem Wert des aktuellen Datums und der aktuellen Uhrzeit im Computerbrowser.
- datum einstellen () - Die Methode legt den Tag des Monats (von 1 bis 31) entsprechend der Ortszeit fest
- verabredung bekommen () - Die Methode gibt den Tag des Monats (von 1 bis 31) für das angegebene Datum gemäß der Ortszeit zurück
- getSeconds (), getMinutes () und getHours () - Mit diesen Methoden können Sie Sekunden, Minuten und Stunden der aktuellen Zeit in den Browser abrufen.
- (Sekunden< 10 ? "0" : "") + seconds) - fügt dem Sekundenwert (Minuten und Stunden) eine führende Null hinzu. Symbole ? und : umfassen ternäre ( ternär) Operator. Dies ist ein spezieller Operator, der den Wert vor dem Doppelpunkt zurückgibt, wenn die Bedingung zuvor vorliegt eine Frage (? ) Recht ( wahr) oder der Wert nach doppelpunktwenn die Bedingung nicht erfüllt ist ( falsch).
- Funktion setInterval ist der Standard javascript Funktion, nicht Teil jQuery... Führt den Code mehrmals in regelmäßigen Abständen (Millisekunden) aus.