Machen Sie eine Echtzeituhr mit einem Kegelgradientengesicht

CSS -Gradienten bieten vielseitige Konstruktionsoptionen, wobei häufig radiale und lineare Gradienten verwendet werden. Konic -Gradienten werden jedoch oft übersehen. Dieses Tutorial zeigt, dass ein einzigartiges Uhrengesicht erzeugt wird, das die Fähigkeiten von Kegelgradienten nutzt.

Kegelgradienten verstehen

Konic -Gradienten erzeugen Farbübergänge, die sich um einen zentralen Punkt drehen und mehrere Farbwerte unterstützen. Entscheidend ist, dass der from Wert innerhalb der Funktion conic-gradient() die Rotation oder den Startpunkt definiert. Dieser Winkel kann sogar negativ sein, eine Funktion, die wir ausnutzen werden.

 Hintergrundbild: Conic-Gradient (aus 45 Grad, #6e7dab, #5762d5);

Dieses einfache Beispiel zeigt die Eleganz von Kegelgradienten.

Aufbau der Uhrstruktur

Wir beginnen damit, die HTML für die Uhr und ihre Hände zu strukturieren: (HTML -Code für die Kürze weggelassen, da es sich um Standard -Uhr -Hand -Markup handelt).

Als nächstes stylen wir die Uhr mit CSS und verwenden CSS -Variablen zur einfachen Anpassung. Diese Variablen werden mit JavaScript dynamisch aktualisiert.

 .Uhr {
  / * Taktvariablen *//
  -Stunde-Handfarbe: #000;
  -Stunde-Hand-Teger: 0DEG;
  -Minute-Handfarbe: #000;
  -Minute-Hand-Degree: 0DEG;
  -Sekundengeschäftsfarbe: Hotpink;
  -Sekundenziegende Handgeschwindigkeit: 0deg;

  Position: Relativ;
  Min-Width: 320px;
  Breite: 25 VW;
  Höhe: 25 VW;
  Min-Höhe: 320px;
  Grenzradius: 50%;
  Rand: 0 Auto;
  Grenze: 7px fest #000;
}

/ * Uhr Hände Stile */
.Hand {
  / * ... (Handstile für Kürze weggelassen) ... */
}

Die Eigenschaft mit transform-origin sorgt für die korrekte Handrotation. Benutzerdefinierte Eigenschaften verwalten Handwinkel, die über JavaScript für genaue Zeitmessungen aktualisiert werden.

Implementierung der JavaScript -Logik

Wir wählen das Taktelement aus und definieren die Funktion setDate() :

 const clock = document.getElementById ("Uhr");
Funktion setDate () {
  // Zeitberechnung und Handwinkel -Updates
}
setDate (); // Erstes Setup

In setDate() berechnen wir Handwinkel mit Date() :

 const jetzt = neues Datum ();
const secessangle = now.getSeconds () * 6;
const minsangle = now.getminutes () * 6 Sekundenangle / 60;
const stoundangle = ((jetzt.Gethours () % 12) / 12) * 360 minsangle / 12;

Die Berechnungen sorgen für eine genaue Handpositionierung, die Sekunden, Minuten und Stunden berücksichtigen. Anschließend aktualisieren wir die CSS -Variablen:

 Clock.Style.SetProperty ("-Second-Hand-Degrees", SecondSangle "Deg");
Clock.Style.SetProperty ("-Minute-Hand-Degreen", Minsangle "Deg");
Clock.Style.SetProperty ("-WORT-Hand-Teger", Hourangle "Deg");

Schließlich aktualisiert setInterval(setDate, 1000) die Uhr jede Sekunde.

Integration des Kegelgradienten

Um den Conic -Gradienten zu integrieren, ändern wir die .clock -Stile:

 .Uhr {
  / * ... (vorherige Stile) ... */
  -Start: 0deg;
  --end: 0deg;
  Hintergrund: Conic-Gradient (von Var (-Start), RGB (255 255 255) 2DEG, RGB (0 0 0 / 0,5) var (-Ende), RGB (255 255 255) 2DEG, RGB (0 0 0 / 0,7));
}

Wir stellen --start und --end Variablen, um die Start- und Endwinkel des Gradienten zu steuern. Die setDate() -Funktion wird aktualisiert, um diese Variablen zu berechnen und festzulegen, wobei minsAngle hourAngle unter Verwendung negativer Winkel für nahtlose Übergänge überschreitet. (JavaScript -Code für Gradientenwinkelberechnungen für die Kürze, da es sich um eine einfache Aktualisierung der Variablen für --start und --end basierend auf minsAngle und hourAngle ).

Dies vervollständigt die Uhr mit einem dynamischen konischen Gradientengesicht. Experimentieren Sie mit verschiedenen Farbschemata und Stilen, um Ihre eigenen einzigartigen Uhrendesigns zu erstellen.

Das obige ist der detaillierte Inhalt vonMachen Sie eine Echtzeituhr mit einem Kegelgradientengesicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!