ในระหว่างกระบวนการสร้างนาฬิกาฉันคิดถึงวิธีการเขียนหน้าปัดต่อไปนี้:
แน่นอนว่าสามารถทำได้โดยใช้รูปแบบนั้นดังนั้นเราจึงต้องใช้ความเข้าใจที่ดีที่สุดและรหัสมีวิธีที่ค่อนข้างง่ายในการใช้งาน
1. ใช้ฟังก์ชั่นตรีโกณมิติ
ในกระบวนการใช้ JS เพื่อจัดเรียงหน้าปัดในฟังก์ชั่นตรีโกณมิติฉันพบสถานการณ์นี้: ในระดับของหน้าปัดเมื่อคำนวณค่าเฉพาะที่มีฟังก์ชั่นตรีโกณมิติจำนวนเต็มไม่สามารถรับได้ แม้ว่าเอฟเฟกต์ขั้นสุดท้ายสามารถทำได้การเบี่ยงเบนในช่องว่างและมุมที่ละเอียดอ่อนจะส่งผลกระทบต่อประสบการณ์การมองเห็นโดยรวม ในฐานะนักพัฒนาโปรแกรมประสบการณ์การมองเห็นดังกล่าวเป็นเรื่องยากที่จะได้รับการยอมรับจากผู้อื่นและยอมแพ้
2. ใช้เลเยอร์การปิดบัง
JS ใช้เลเยอร์การปิดบังส่วนใหญ่ที่ระดับการหมุน เครื่องชั่งหมุนมีความยาวและสั้นและทุก ๆ 5 เครื่องชั่งมีสเกลนานขึ้น ด้วยวิธีนี้ความยาวของเครื่องชั่งที่เราใช้เลเยอร์การปิดบังเหมือนกันและเป็นการยากที่จะปรับสเกลอื่น ๆ ต่อไปดังนั้นเราจึงยอมแพ้
3. การวางตำแหน่งการใช้ประโยชน์และ (ความสัมพันธ์กับพ่อ-ลูก) (แนะนำ)
ฉันคิดว่าเป็นการดีที่สุดที่จะเข้าใจและเริ่มต้นด้วยวิธีการวางตำแหน่งและความสัมพันธ์กับพ่อกับลูก ฉันจะแบ่งปันกับคุณที่นี่ นี่คือรหัสการใช้งาน:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <style media = "หน้าจอ"> * {margin: 0; Padding: 0; } #clock {Width: 600px; ความสูง: 600px; เส้นขอบ: 4px Solid Lightgray; มาร์จิ้น: อัตโนมัติ; ตำแหน่ง: ญาติ; แนวชายแดน: 50%; } #scale {Width: 20px; ความสูง: 100%; ตำแหน่ง: สัมบูรณ์; ซ้าย: 50%; ขอบซ้าย: -10px; /*พื้นหลัง: green;*/} #point {width: 4px; ความสูง: 10px; พื้นหลัง: Lightgray; มาร์จิ้น: อัตโนมัติ; } #number {width: 20px; ความสูง: 20px; ระยะขอบด้านบน: 5px; /*พื้นหลัง: สีแดง;*/ ตัวอักษรขนาด: 20px; TEXT-ALIGN: CENTER; ความสูงของสาย: 20px; } #hour {width: 12px; ความสูง: 180px; ความเป็นมา: สีแดง; แนวชายแดน: 6px; Transform-Origin: 50% 150px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 150px; ซ้าย: 50%; ขอบซ้าย: -6px; } #minute {width: 8px; ความสูง: 250px; ความเป็นมา: สีส้ม; ตำแหน่ง: สัมบูรณ์; แนวชายแดน: 4px; Transform-Origin: 50% 200px; ด้านบน: 100px; ซ้าย: 50%; ขอบซ้าย: -4px; } #second {width: 4px; ความสูง: 360px; ความเป็นมา: สีแดง; แนวชายแดน: 2px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 50%; ขอบซ้าย: -2px; Transform-Origin: 50% 300px; z-index: 100; } </style> </head> <body> <div id = "นาฬิกา"> <div id = "ชั่วโมง"> </div> <div id = "นาที"> </div> <div id = "second"> </div> </body> <script type = "text/javascript" var hour = document.getElementById ('ชั่วโมง'); var minute = document.getElementById ('นาที'); var second = document.getElementById ('สอง'); ฟังก์ชั่นพื้นผิว () {var currentDate = วันที่ใหม่ (); var hours = currentDate.GetHours (); var นาที = currentDate.getMinutes (); var วินาที = currentDate.getSeconds (); วินาที = ชั่วโมง * 3600 + นาที * 60 + วินาที; ชั่วโมง Style.transform = 'หมุน ('+วินาที / 120+'deg)'; minute.style.transform = 'หมุน ('+วินาที * 0.1+'deg)'; second.style.transform = 'หมุน ('+วินาที * 6+'deg)'; } setInterval ('surface ()', 1,000); สำหรับ (var i = 1; i <61; i ++) {var scale = document.createElement ('div'); Scale.id = 'Scale'; scale.style.transform = 'หมุน ('+i * 6+'deg)'; Clock.appendchild (สเกล); var point = document.createElement ('div'); point.id = 'point'; scale.appendchild (จุด); var number = document.createElement ('div'); number.id = 'number'; number.style.transform = 'หมุน (-'+i * 6+'deg)' ถ้า (i % 5 == 0) {number.innerhtml = i / 5; point.style.height = '15px'; } scale.AppendChild (หมายเลข); } </script> </html>ควรจ่ายหมายเหตุระหว่างการสอบเทียบ:
1. ต่อไปนี้เป็นแผนภาพการเรนเดอร์ที่ดำเนินการทีละขั้นตอน ในที่สุดรายละเอียดจะถูกจับคู่อย่างใกล้ชิด ไม่มีวิธีอื่นที่ใช้ในการปรับแต่ง หลังจากเลย์เอาต์สไตล์เสร็จสิ้นเวลาปัจจุบันสามารถรับและแก้ไขได้ มีปัญหาดังกล่าวในระหว่างกระบวนการแก้ไข ฉันหวังว่าทุกคนจะให้ความสนใจกับ: มุมการหมุนของมือชั่วโมงไม่สามารถคำนวณได้ในหน่วยชั่วโมง ตัวอย่างเช่น: 9:58 ในเวลานี้ตำแหน่งของการชี้มือชั่วโมงคือ 9 เมื่อ 10:00 ตำแหน่งต่อไปนี้ของมือชั่วโมงจะกระโดดไปยังตำแหน่ง 10 ดังนั้นมุมของมือชั่วโมงควรคำนวณในนาทีหรือวินาทีและมุมของมือนาทีควรคำนวณในนาทีหรือวินาที มือสองกระโดด 6 องศาต่อวินาที
2. สิ่งที่ควรทราบอีกอย่างหนึ่งคือศูนย์การหมุนของตัวชี้ทั้งสามจะต้องถูกกำหนดโดยใช้การแปลงแหล่งกำเนิดเพื่อกำหนดจุดหมุนของตัวชี้
บทความข้างต้นกล่าวถึงการสร้างนาฬิกาสั้น ๆ (รหัสย่อที่เขียนด้วยลายมือ JS) เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น