Selama proses menghasilkan jam, saya memikirkan cara -cara berikut untuk menulis dial:
Tentu saja, dapat dicapai dengan menggunakan pola itu, jadi kita perlu menggunakan pemahaman terbaik dan kode memiliki cara yang relatif sederhana untuk mengimplementasikannya.
1. Gunakan fungsi trigonometri
Dalam proses menggunakan JS untuk mengatur dial dalam fungsi trigonometri, saya menemukan situasi ini: pada skala dial, ketika menghitung nilai -nilai spesifik dengan fungsi trigonometri, bilangan bulat tidak dapat diperoleh, dan perlu dibulatkan ke atas atau ke bawah, sehingga akan ada beberapa penyimpangan tanpa izin, dan penyimpangan yang sulit disesuaikan. Bahkan jika efek akhir dapat dicapai, penyimpangan dalam celah dan sudut yang halus akan mempengaruhi pengalaman visual secara keseluruhan. Sebagai pengembang program, pengalaman visual seperti itu sulit dikenali oleh orang lain dan menyerah.
2. Gunakan lapisan masking
JS menggunakan lapisan masking, terutama pada skala dial. Skala dial memiliki panjang dan pendek, dan setiap 5 skala memiliki skala yang lebih panjang. Dengan cara ini, panjang skala yang kami gunakan dengan lapisan masking adalah sama, dan sulit untuk terus menyesuaikan skala lainnya, jadi kami menyerah.
3. Posisi pemanfaatan dan (hubungan ayah-anak) (direkomendasikan)
Saya pikir yang terbaik adalah memahami dan memulai dengan metode penentuan posisi dan hubungan ayah-anak. Saya akan membaginya dengan Anda di sini. Ini kode implementasinya:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> </iteme> <style media = "screen"> * {margin: 0; Padding: 0; } #clock {width: 600px; Tinggi: 600px; Border: 4px Solid Lightgray; margin: otomatis; Posisi: kerabat; Border-Radius: 50%; } #scale {width: 20px; Tinggi: 100%; Posisi: Absolute; Kiri: 50%; margin -kiri: -10px; /*latar belakang: green;*/} #point {width: 4px; Tinggi: 10px; Latar Belakang: Lightgray; margin: otomatis; } #number {width: 20px; Tinggi: 20px; margin-top: 5px; /*latar belakang: merah;*/ ukuran font: 20px; Teks-Align: tengah; Line-Height: 20px; } #hour {width: 12px; Tinggi: 180px; Latar Belakang: Merah; Border-Radius: 6px; Transform-Origin: 50% 150px; Posisi: Absolute; Atas: 150px; Kiri: 50%; margin -kiri: -6px; } #minute {width: 8px; Tinggi: 250px; Latar belakang: oranye; Posisi: Absolute; Border-Radius: 4px; Transform-Origin: 50% 200px; Atas: 100px; Kiri: 50%; margin -kiri: -4px; } #second {width: 4px; Tinggi: 360px; Latar Belakang: Merah; Border-Radius: 2px; Posisi: Absolute; TOP: 0; Kiri: 50%; margin -kiri: -2px; Transform-Origin: 50% 300px; z-index: 100; } </tyle> </head> <body> <Div id = "clock"> <div id = "hour"> </div> <div id = "Minute"> </div> <div id = "kedua"> </detelementById (body> <script type = "text/javaScript"> var clock = document.geteLementById ('clock'); var hour = document.geteLementById ('hour'); var menit = document.geteLementById ('menit'); var kedua = document.getElementById ('kedua'); function permukaan () {var currentDate = new date (); var jam = currentDate.getHours (); var menit = currentDate.getMinutes (); var detik = currentDate.getSeconds (); detik = jam * 3600 + menit * 60 + detik; hour.style.transform = 'rotate ('+detik / 120+'deg)'; Minute.style.transform = 'rotate ('+detik * 0,1+'deg)'; Second.style.transform = 'rotate ('+detik * 6+'deg)'; } setInterval ('Surface ()', 1000); untuk (var i = 1; i <61; i ++) {var scale = document.createElement ('div'); skala.id = 'skala'; scale.style.transform = 'rotate ('+i * 6+'deg)'; clock.AppendChild (skala); var point = document.createElement ('div'); point.id = 'point'; skala.appendChild (point); var number = document.createElement ('div'); number.id = 'number'; number.style.transform = 'rotate (-'+i * 6+'deg)' if (i % 5 == 0) {number.innerHtml = i / 5; point.style.height = '15px'; } skala.AppendChild (angka); } </script> </html>Catatan harus dibayar selama kalibrasi:
1. Berikut ini adalah diagram rendering yang diimplementasikan langkah demi langkah. Akhirnya, detailnya sangat cocok. Tidak ada metode lain yang digunakan untuk menyempurnakannya. Setelah tata letak gaya selesai, waktu saat ini dapat diperoleh dan diperbaiki. Ada masalah seperti itu selama proses koreksi. Saya harap semua orang dapat memperhatikan: Sudut rotasi jam tangan tidak dapat dihitung dalam satuan jam. Sebagai contoh: 9:58 saat ini, posisi menunjuk tangan jam adalah 9. Ketika 10:00, posisi berikut dari jam tangan melompat ke posisi 10. Oleh karena itu, sudut tangan harus dihitung dalam menit atau detik, dan sudut tangan menit harus dihitung dalam menit atau detik. Tangan kedua melompat 6 derajat per detik.
2. Hal lain yang perlu diperhatikan adalah bahwa pusat rotasi dari tiga pointer harus ditentukan menggunakan transformasi-asal untuk menentukan titik rotasi pointer.
Artikel di atas secara singkat membahas generasi jam (kode ringkas tulisan tangan JS) adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.