Efek jam lain akan datang. Implementasi ini tidak memerlukan kanvas, ditarik oleh Div, Ul, dan Li, yang menyenangkan dan realistis.
Haha ~
JS yang Anda butuhkan untuk mencapai efek bergerak ini, tetapi tidak ada banyak konten di JS, jadi tidak sulit.
Ini terutama ide menggunakan transformasi dalam CSS. Transformasi memiliki banyak atribut yang berubah, dan jam biasa
Ini hal yang bulat dalam pikiran saya. Jadi bisakah saya memutar properti ini (berputar) untuk mengimplementasikannya? Skalanya
Menggunakan rotasi dan mengatur titik rotasi di tengah lingkaran, bukankah mungkin untuk membalikkan pusat lingkaran? Bagian bawah jam tidak
Apakah pusat lingkaran bersentuhan? Maka tidak masalah untuk mengatur bagian bawah jam ke titik rotasi. Saya secara kasar berbicara tentang ide -ide saya.
Kode:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> transform </iteme> <style id = "css"> #clock {width: 200px; Tinggi: 200px; Perbatasan: 2px solid #000; Border-Radius: 50%; Margin: 100px Auto 0; Posisi: kerabat; } #clock ul {width: 200px; Tinggi: 200px; Posisi: kerabat; List-style: tidak ada; Padding: 0; Margin: 0; } #clock ul {width: 200px; Tinggi: 200px; Posisi: kerabat; List-style: tidak ada; Padding: 0; Margin: 0; } #clock ul {width: 2px; Tinggi: 10px; Latar belakang: #000; Transform-Origin: Center 100px; Posisi: Absolute; TOP: 0; Kiri: 50%; } #clock ul li: nth-of-type (5n+1) {height: 20px; } #hour {height: 40px; Lebar: 4px; Latar Belakang: #00Fefe; Posisi: Absolute; Atas: 60px; Kiri: 99px; Transform-Origin: Center Bottom; } #min {height: 60px; Lebar: 3px; Latar Belakang: #001AFE; Posisi: Absolute; Atas: 40px; Kiri: 99px; Transform-Origin: Center Bottom; transformasi: putar (15deg); } #sec {height: 70px; Lebar: 2px; Latar belakang: #000; Posisi: Absolute; Atas: 30px; Kiri: 99px; Transform-Origin: Center Bottom; } #dot {width: 10px; Tinggi: 10px; Posisi: Absolute; Kiri: 95px; Atas: 95px; Latar belakang: #aaa; Border-Radius: 50%; } </tyle> </head> <body> <Div id = "clock"> <ul> </ul> <div id = "hour"> </div> <div id = "min"> </div> <div id = "sec"> </div> <div id = "dot"> </Div> </Div> <skrip "var ocss = document.getelement =" dot "> </div> </div> <script> var ocss = document.getelement =" dot "> </Div> </div> <script> var ocss = document.getelement =" dot "> </Div> </div> <script> var ocss = document.getelement =" dot "> </Div> </div> <script> var ocss = document.getelement ' var oclock = document.getElementById ("clock"); var oul = oclock.getElementsByTagname ("ul") [0]; var ohour = document.geteLementById ("jam"); var omin = document.getElementById ("min"); var osec = document.geteLementById ("sec"); var strli = ""; var strcss = ""; untuk (var i = 0; i <60; i ++) {strli+= "<li> </li>"; } oul.innerhtml = strli; untuk (var i = 0; i <60; i ++) {strcss+= '#clock ul li: nth-of-type ('+(i+1)+') {transform: rotate ('+i*6+'deg);}'; } ocss.innerhtml+= strcss; waktu(); setInterval (waktu, 1000); function time () {var date = new date (); var h = date.getHours (); var m = date.getMinutes (); var s = date.getSeconds (); ohour.style.transform = "rotate ("+(h+m/60)*30+"deg)"; omin.style.transform = "rotate ("+(m+s/60)*6+"deg)"; osec.style.transform = "rotate ("+s*6+"deg)"; } </script> </body> </html>Hal terpenting dalam menggambar dengan tag adalah pemosisian, karena dengan cara ini kita dapat meletakkan kotak yang telah dibentuk menjadi bentuk dalam posisi yang Anda inginkan. Lembar gaya CSS internal dapat diperoleh dengan mendapatkan elemen, sehingga Anda dapat menambahkan gaya untuk menggunakan innerHTML, dan menambahkannya dalam satu loop. Ada juga banyak skala, sehingga Anda dapat menggunakan Loop untuk ditambahkan, yang menghemat waktu dan upaya. Adapun waktu yang tersisa, Anda dapat menjalankan fungsi setiap 1 detik, sehingga akan bergerak.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.