Machen Sie eine Echtzeituhr mit einem Kegelgradientengesicht

const Now = new Date (); const secessangle = now.getSeconds () * 6; const minsangle = now.getminutes () * 6 Sekundenangle / 60; const stoundangle = ((jetzt.Gethours () % 12) / 12) * 360 minsangle / 12; < / pre> <p> Die Berechnungen sorgen für eine genaue Handpositionierung, Bilanzierung für Sekunden, Minuten und Stunden. Anschließend aktualisieren wir die CSS-Variablen: </p> <pre class="brush:php;toolbar:false"> clock.style.setProperty (" secondsangle clock.style.setproperty minsangle hourangle> </p> <p> Schließlich <code> setInterval (setdate, 1000) </code> Aktualisiert die Uhr jede Sekunde. </p> <pre class="brush:php;toolbar:false"> .clock { / * ... (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 ein, um die Start- und Endwinkel des Gradienten zu steuern. Die Funktion setDate () wird aktualisiert, um diese Variablen zu berechnen und festzulegen, wobei die Fälle von minsangle hourangle verwendet werden, indem negative Winkel für nahtlose Übergänge verwendet werden. (JavaScript-Code für Gradientenwinkelberechnungen für die Kürze, da es sich um eine einfache Aktualisierung des -start und -enden Variablen basierend auf minsangle und Hourangle ). 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!