Membuat jam masa nyata dengan wajah kecerunan kerucut

.clock {/ * pembolehubah jam */-hour-hand-color: #000; -Hour-Hand-Decor: 0deg; --minute-hand-color: #000; --minit-tangan: 0deg; -second-hand-color: hotpink; -second-hand-darjah: 0deg; Kedudukan: Relatif; Min-lebar: 320px; Lebar: 25VW; Ketinggian: 25VW; Min-ketinggian: 320px; Radius sempadan: 50%; Margin: 0 Auto; Sempadan: 7px pepejal #000; }/ * Jam tangan gaya */.hand {/ * ... (gaya tangan yang ditinggalkan untuk brevity) ... */}

Transform-Orig Property Memastikan putaran tangan yang betul. Sifat tersuai menguruskan sudut tangan, dikemas kini melalui JavaScript untuk masa yang tepat. fungsi setDate () {// pengiraan masa dan kemas kini sudut tangan} setDate (); // persediaan awal

di dalam setDate () , kami mengira sudut tangan menggunakan date () :

const now = new date (); const secondSangle = now.getSeconds () * 6; const minsangle = now.getMinutes () * 6 saat / 60; const hourangle = ((now.gethours () % 12) / 12) * 360 minsangle / 12; < / pre>

Pengiraan memastikan kedudukan tangan yang tepat, perakaunan untuk saat, minit, dan jam. Kami kemudian mengemas kini pembolehubah CSS:

 clock.style.setProperty (" kedua detik clock.style.setproperty minsangle tangan-darjah jam> </p>
<p> Akhirnya, <code> setInterval (setDate, 1000) </code> mengemas kini jam setiap saat. </p>
<pre class="brush:php;toolbar:false"> .clock { / * ... (gaya terdahulu) ... * / --start: 0deg; --End: 0deg; Latar Belakang: Conic-Gradient (dari Var (-Start), RGB (255 255 255) 2DEG, RGB (0 0 0 / 0.5) VAR (-END), RGB (255 255 255) 2DEG, RGB (0 0 0 / 0.7)); } 

Kami memperkenalkan -Start dan -end variables untuk mengawal sudut permulaan dan akhir kecerunan. Fungsi setDate () dikemas kini untuk mengira dan menetapkan pembolehubah ini, mengendalikan kes di mana minsangle melebihi hourangle menggunakan sudut negatif untuk peralihan lancar. (Kod JavaScript untuk pengiraan sudut kecerunan yang ditinggalkan untuk keringkasan, kerana ia adalah kemas kini langsung -mula dan -end pembolehubah berdasarkan minsangle dan hourtangle ). Eksperimen dengan skema warna dan gaya yang berbeza untuk membuat reka bentuk jam unik anda sendiri.

Atas ialah kandungan terperinci Membuat jam masa nyata dengan wajah kecerunan kerucut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!