Wir haben uns bereits mit der Erstellung einer Uhr mithilfe von CSS und JavaScript befasst. In diesem Tutorial werden wir dieselbe Uhr mit CSS3 erstellen, um zu sehen, wie neuer Standard verändert die Herangehensweise an die Entwicklung verschiedener Effekte. Die Demo für dieses Tutorial funktioniert nur in Browsern, die die CSS3-Eigenschaft unterstützen drehen(Die Demo FUNKTIONIERT NICHT im IE6).

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, horizontale und vertikale Verzerrungen einführen und Elemente auf einer Webseite verschieben. All dies kann mithilfe der Eigenschaft animiert werden Übergang(Mit verschiedene TypenÜbergänge und Dauer).

Die gleichen Aktionen zum Animieren von Seitenelementen können mit einer JavaScript-Bibliothek (z. B. jQuery) ausgeführt werden. Natürlich können Sie mit jQuery noch viel mehr Änderungen animieren CSS-Eigenschaften als zu verwenden Übergang. Aber jQuery ist 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.

Zuerst müssen wir eine grafische Oberfläche für die Uhr erstellen. Wir werden eine Basis und drei Pfeile haben. Alle beweglichen Teile werden in Photoshop auf die Abmessungen 600 Pixel Höhe und 30 Pixel Breite zugeschnitten, vertikal positioniert und sind standardmäßig die Eigenschaft drehen dreht das Element um die Mitte. Sie können die Immobilie nutzen Transformationsursprung um den Drehpunkt auf einen anderen Punkt zu setzen.

Für den Sockel der Uhr können Sie jedes beliebige Bild verwenden. Die beweglichen Teile sind PNG-Bilder mit Transparenz.

Archiviert mit Quellcode Die Demo enthält eine PSD-Datei, die alle Bilder enthält.

Das Layout der Uhr ist eine einfache ungeordnete Liste. Jedes Listenelement enthält einen beweglichen Teil und hat eine entsprechende ID:

#clock ( Position: relativ; Breite: 600 px; Höhe: 600 px; Rand: 20 px auto 0 auto; Hintergrund: url(clockface.jpg); Listenstil: keine; ) #sec, #min, #hour ( position: absolut ; Breite: 30px; Höhe: 600px; oben: 0px; links: 285px; ) #sec ( Hintergrund: url(secand.png); z-index: 3; ) #min ( Hintergrund: url(minhand.png); z -index: 2; ) #hour ( Hintergrund: url(hourhand.png); z-index: 1; )

Auch das CSS ist recht einfach. Da die beweglichen Teile die gleichen Abmessungen und Startpunkte haben, können wir sie gemeinsam deklarieren, um Wiederholungen zu vermeiden. Element ul erhält eine relative Positionierung, die eine absolute Positionierung für die darin befindlichen Pfeile ermöglicht.

Das CSS3 wird mit ein wenig jQuery-Code angewendet.

Es ist zu beachten, dass jQuery hervorragend mit den neuen CSS3-Eigenschaften funktioniert. Da Stile außerdem dynamisch hinzugefügt werden, CSS-Datei besteht die Validierung als CSS2.1!

Zeit kann auch abgerufen werden mit PHP Code, aber es wird Serverzeit sein. Und JavaScript gibt die Ortszeit des Benutzers zurück.

Wir erhalten Informationen über Datum() und legen Sie alle unsere Variablen fest. Wir werden entsprechend verwenden GetSeconds(), GetMinutes() oder GetHours() Für Datum() So stellen Sie Sekunden, Minuten und Stunden ein:

Var seconds = new Date().getSeconds();

In der obigen Zeile wird eine Zahl aus dem Bereich von 0 bis 59 ermittelt und einer Variablen zugewiesen Sekunden.

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 die Zahl 6 ergibt. Das heißt, jede Sekunde oder Minute entspricht einer Drehung von 6 Grad. Wir werden das Ergebnis der Berechnungen in einer anderen Variablen speichern. Sekundenlang sieht der Code so aus:

Var-Grad = Sekunden * 6;

Bei Uhren werden die Berechnungen anders ausfallen. Da wir ein Zifferblatt mit 12 Positionen für den Stundenzeiger haben, entspricht jede Stunde einem Drehwinkel von 30 Grad (360/12=30). Aber auch der Stundenzeiger muss sich in Zwischenzuständen befinden, das heißt, er muss sich jede Minute bewegen. Das heißt, bei 4:30 Uhr sollte sich der Stundenzeiger in der Mitte zwischen 3 und 4 Uhr befinden. So machen wir es:

Var hdegree = Stunden * 30 + (Minuten / 2);

Das heißt, wir addieren zum Drehwinkel durch die Anzahl der Stunden den Wert der Division der Anzahl der Minuten durch 2 (was uns einen Wert im Bereich von 0,5 bis 29,5 ergibt). Dadurch wird der Stundenzeiger um einen Winkel von 0 bis 30 Grad „gedreht“ (Stundenschritt).

Zum Beispiel:

2 Stunden 40 Minuten -> 2*30 = 60 Grad und 40/2 = 20 Grad. Gesamt: 80 Grad.

Wir können davon ausgehen, dass die Uhr nach 12 Uhr wer weiß was anzeigt, da der Rotationswert mehr als 360 Grad betragen wird. Aber alles funktioniert super.

Jetzt können wir CSS-Regeln einfügen.

So sieht eine CSS3-Regel aus drehen im Stylesheet:

#sec ( -webkit-transform: rotieren (45 Grad); -moz-transform: rotieren (45 Grad); )

Und so wird der Code mit jQuery eingefügt:

$("#sec").css(("-moz-transform" : "rotate(45deg)", "-webkit-transform" : "rotate(45deg)"));

Das einzige Problem besteht darin, den resultierenden Winkelwert in der Syntax in der Variable „sdegree“ anstelle von 45 Grad festzulegen. Es muss eine Zeichenfolge in einer anderen Variablen erstellt werden rotieren und ersetzen Sie das zweite Argument vollständig. So:

Var srotate = "rotate(" + sdegree + "deg)";

Und der jQuery-Code sieht so aus:

$("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate));

Der jQuery-Code sieht folgendermaßen aus:

$(document).ready(function() ( setInterval(function() ( var seconds = new Date().getSeconds(); var sdegree = seconds * 6; var srotate = "rotate(" + sdegree + "deg)" ; $("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate)); ), 1000); setInterval(function() ( var hours = new Date() .getHours(); var mins = new Date().getMinutes(); var hdegree = Stunden * 30 + (mins / 2); var hrotate = "rotate(" + hdegree + "deg)"; $("#hour ").css(("-moz-transform" : hrotate, "-webkit-transform" : hrotate)); ), 1000); setInterval(function() ( var mins = new Date().getMinutes(); var mdegree = mins * 6; var mrotate = "rotate(" + mdegree + "deg)"; $("#min").css(("-moz-transform" : mrotate, "-webkit-transform" : mrotate) ); ), 1000); ));

Wir gebrauchen JavaScript-Funktion setInterval um Stile jede Sekunde zu aktualisieren. Variablen, die Zeitwerte empfangen, müssen darin aktualisiert werden. Andernfalls wird die Uhr zu nutzlosem Müll auf der Seite.

Diese Lektion demonstriert die praktische Anwendung der Eigenschaft drehen hat nichts mit Design zu tun.

Dies ist ihr Hauptskript:

200?"200px=""+(this.scrollHeight+5)+"px");">00:00:00

setInterval(function () (
Datum = neues Datum(),
h = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds(),
h = (h< 10) ? "0" + h: h,
m = (m< 10) ? "0" + m: m,
s = (s< 10) ? "0" + s: s,
document.getElementById("time").innerHTML = h + :: + m + :: + s;
}, 1000);

Ganz oben sehen wir:

200?"200px=""+(this.scrollHeight+5)+"px");">00:00:00

Einfach hinzufügen Miniaturansicht und gelbe Tönung und Pfeile.

200?"200px=""+(this.scrollHeight+5)+"px");">"00:00:00"

Und das ist passiert:

So können Sie selbst sehen, wie sich alles verändert hat, und jetzt können Sie alles selbst machen und es wunderschön an Ihren Stil anpassen. Dass andere nicht erledigt werden können, da Flash vorhanden ist, dass sie nicht hier sind.

Jetzt gibt es zusätzlich eine Uhr auf Flash

200?"200px="+(this.scrollHeight+5)+"px");">
.swf">

Sie können also auswählen, welche Ihnen am besten gefallen, und sie installieren, da einige in einem Block installiert werden können. Die ersten gefallen Ihnen jedoch besser, da sie flexibel und anpassbar sind, was jeder tun kann.

Lass es uns tun Digitaluhr mit Datum und Uhrzeit unter Verwendung von jQuery und CSS3 für eine kleine Animation.

Das Markup ist einfach und flexibel. Erstellen Sie ein DIV mit einer Klasse namens „clock“, ein DIV mit einer Klasse namens „Date“, die das Datum anzeigt, und eine ungeordnete Liste mit den Stunden, Minuten und Sekunden.

Designstile mit kleiner 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; ) #Datum ( Schriftart- Familie: Arial, Helvetica, serifenlos; Schriftgröße:36px; text-align:center; text-shadow:0 0 5px #00c6ff; ) ul ( width:800px; margin:0 auto; padding:0px; list- style:none; text-align:center; ) ul li ( display:inline; font-size:10em; text-align:center; font-family:Arial, Helvetica, sans-serif; text-shadow:0 0 5px # 00c6ff; ) #point ( position:relative; -moz-animation:mymove 1s Leichtigkeit unendlich; -webkit-animation:mymove 1s Leichtigkeit unendlich; padding-left:10px; padding-right:10px; ) @-webkit-keyframes mymove ( 0 % (Opazität:1,0; Textschatten:0 0 20 Pixel #00c6ff;) 50 % (Opazität:0; Textschatten:keine;) 100 % (Opazität:1,0; Textschatten:0 0 20 Pixel #00c6ff;) ) @-moz-keyframes mymove ( 0 % (opacity:1.0; text-shadow:0 0 20px #00c6ff;) 50 % (opacity:0; text-shadow:none; ) 100 % (opacity:1.0; text-shadow :0 0 20px #00c6ff; ) )

Anbindung der jQuery-Bibliothek

Und dann unser Skript $(document).ready(function() ( // Erstellen Sie zwei Variablen mit den Namen von Monaten und Wochentagen im Array var monatlichNames = [ "Januar", "Februar", "März", " April“, „Mai“, „Juni“, „Juli“, „August“, „September“, „Oktober“, „November“, „Dezember“ ]; var dayNames= ["Sunday", "Monday", "Tuesday ", "Wednesday" ,"Thursday","Friday","Saturday"] // Ein Objekt erstellen newDate() var newDate = new Date(); // Aktuelles Datum aus dem Date-Objekt abrufen newDate.setDate(newDate. getDate()); // Tag, Datum, Monat und Jahr ausgeben $("#Date").html(dayNames + " " + newDate.getDate() + " " + monatlichNames + " " + newDate.getFullYear()) ; setInterval(function() ( // Ein newDate()-Objekt erstellen und die Sekunden der aktuellen Zeit abrufen var seconds = new Date().getSeconds(); // Füge eine führende Null zum Sekundenwert hinzu $("#sec ").html((Sekunden< 10 ? "0" : "") + seconds); },1000); setInterval(function() { // Создаем объект newDate() и извлекаем минуты текущего времени var minutes = new Date().getMinutes(); // Добавляем начальный ноль к значению минут $("#min").html((minutes < 10 ? "0" : "") + minutes); },1000); setInterval(function() { // Создаем объект newDate() и извлекаем часы из текущего времени var hours = new Date().getHours(); // Добавляем начальный ноль к значению часов $("#hours").html((hours < 10 ? "0" : "") + hours); }, 1000); });

• new Date() – erstellt ein neues Date-Objekt mit einem Wert aktuelles Datum und aktuelle Uhrzeit in Ihrem Computerbrowser.
• setDate() – Methode legt den Tag des Monats (von 1 bis 31) entsprechend der Ortszeit fest
• getDate() – 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 die Sekunden, Minuten und Stunden der aktuellen Uhrzeit im Browser abrufen.
• (Sekunden< 10 ? "0" : "") + seconds) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это специальный оператор, который возвращает значение перед двоеточием, если условие перед вопросом (? ) верно (true ), или значение после двоеточия , если условие неверно (false ).
• Die setInterval-Funktion ist eine Standard-JavaScript-Funktion und nicht Teil von jQuery. Führt den Code viele Male in regelmäßigen Abständen (Millisekunden) aus.

Dies ist ein einfaches Skript, das zeigt Systemzeit in JavaScript im Klartext. Stunden, Minuten und Sekunden durch einen Doppelpunkt getrennt – das ist alles.

Um einen 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 eine eigene Schriftart für die Uhr, deren Farbe und Größe festlegen. Wenn Sie keine einfache, sondern eine komplexere Uhr benötigen, schauen Sie sich die Flash-Uhren auf der Website an. Woher bezieht das Skript die Zeitdaten? Die angezeigte Zeit entspricht genau der am Gerät eingestellten Zeit.

Fügen Sie den folgenden Code an der Stelle ein, an der Sie die Uhr auf Ihrer Website sehen möchten. Auf uCoz könnte dies beispielsweise „Oben“ oder „Unten auf der Website“ sein:

200?"200px="+(this.scrollHeight+5)+"px");">
00:00:00

setInterval(function () (
Datum = neues Datum(),
h = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds(),
h = (h< 10) ? "0" + h: h,
m = (m< 10) ? "0" + m: m,
s = (s< 10) ? "0" + s: s,
document.getElementById("time").innerHTML = h + :: + m + :: + s;
}, 1000);

Das Skript zeigt sofort eine Textzeile mit einer Uhr an der Stelle an, an der Sie es installiert haben. Beispiel: „00:00:00“. Sekunden, Minuten und Stunden sind übrigens immer zweistellig, sodass der Wertewechsel reibungslos erfolgt.