เอฟเฟกต์นาฬิกาอื่นกำลังจะมาถึง การใช้งานนี้ไม่จำเป็นต้องใช้ผ้าใบมันถูกวาดโดย Div, UL และ Li ซึ่งเป็นเรื่องสนุกและสมจริง
ฮ่าฮ่า ~
JS ที่คุณต้องการเพื่อให้ได้เอฟเฟกต์นี้จากการเคลื่อนไหว แต่มีเนื้อหาไม่มากนักใน JS ดังนั้นจึงไม่ยาก
ส่วนใหญ่เป็นแนวคิดของการใช้การแปลงใน CSS Transform มีคุณลักษณะที่เปลี่ยนแปลงมากมายและนาฬิกาธรรมดา
มันเป็นเรื่องรอบในใจของฉัน ดังนั้นฉันสามารถหมุนคุณสมบัตินี้ (หมุน) เพื่อใช้งานได้หรือไม่? สเกลของมัน
การใช้การหมุนและการตั้งค่าจุดหมุนที่กึ่งกลางของวงกลมมันเป็นไปไม่ได้ไหมที่จะหันไปรอบ ๆ ศูนย์กลางของวงกลม? ด้านล่างของมือชั่วโมงไม่ได้
เป็นศูนย์กลางของวงกลมที่ติดต่อหรือไม่? จากนั้นมันก็โอเคที่จะตั้งค่าด้านล่างของมือชั่วโมงไปยังจุดหมุน ฉันพูดคุยเกี่ยวกับความคิดของฉันอย่างคร่าวๆ
รหัส:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> transform </title> <style id = "css"> #clock {width: 200px; ความสูง: 200px; ชายแดน: 2px Solid #000; แนวชายแดน: 50%; มาร์จิ้น: 100px auto 0; ตำแหน่ง: ญาติ; } #clock ul {width: 200px; ความสูง: 200px; ตำแหน่ง: ญาติ; รายการสไตล์: ไม่มี; Padding: 0; มาร์จิ้น: 0; } #clock ul {width: 200px; ความสูง: 200px; ตำแหน่ง: ญาติ; รายการสไตล์: ไม่มี; Padding: 0; มาร์จิ้น: 0; } #clock ul {width: 2px; ความสูง: 10px; ความเป็นมา: #000; Transform-Origin: Center 100px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 50%; } #clock ul li: nth-of-type (5n+1) {ความสูง: 20px; } #hour {ความสูง: 40px; ความกว้าง: 4px; ความเป็นมา: #00fefe; ตำแหน่ง: สัมบูรณ์; ด้านบน: 60px; ซ้าย: 99px; Transform-Origin: กึ่งกลางด้านล่าง; } #min {ความสูง: 60px; ความกว้าง: 3px; ความเป็นมา: #001afe; ตำแหน่ง: สัมบูรณ์; ด้านบน: 40px; ซ้าย: 99px; Transform-Origin: กึ่งกลางด้านล่าง; แปลง: หมุน (15deg); } #sec {ความสูง: 70px; ความกว้าง: 2px; ความเป็นมา: #000; ตำแหน่ง: สัมบูรณ์; ด้านบน: 30px; ซ้าย: 99px; Transform-Origin: กึ่งกลางด้านล่าง; } #DOT {WIDTH: 10PX; ความสูง: 10px; ตำแหน่ง: สัมบูรณ์; ซ้าย: 95px; ด้านบน: 95px; ความเป็นมา: #AAA; แนวชายแดน: 50%; } </style> </head> <body> <div id = "นาฬิกา" ><ul></ul> <div id = "ชั่วโมง"> </div> <div id = "min"> </div> <div id = "sec"> </div> <div id = "dot"> </div> var oclock = document.getElementById ("นาฬิกา"); var oul = oclock.getElementsByTagname ("ul") [0]; var ohour = document.getElementById ("ชั่วโมง"); var omin = document.getElementById ("min"); var osec = document.getElementById ("sec"); var strli = ""; var strcss = ""; สำหรับ (var i = 0; i <60; i ++) {strli+= "<li> </li>"; } oul.innerhtml = strli; สำหรับ (var i = 0; i <60; i ++) {strcss+= '#นาฬิกา ul li: nth-of-type ('+(i+1)+') {transform: rotate ('+i*6+'deg);}'; } ocss.innerhtml+= strcss; เวลา(); setInterval (เวลา, 1,000); เวลาฟังก์ชั่น () {var date = วันที่ใหม่ (); var h = date.getHours (); var m = date.getMinutes (); var s = date.getSeconds (); Ohour.style.transform = "หมุน ("+(h+m/60)*30+"deg)"; omin.style.transform = "หมุน ("+(m+s/60)*6+"deg)"; osec.style.transform = "หมุน ("+s*6+"deg)"; } </script> </body> </html>สิ่งที่สำคัญที่สุดในการวาดด้วยแท็กคือการวางตำแหน่งเพราะในวิธีนี้เราสามารถใส่กล่องที่เกิดขึ้นเป็นรูปร่างในตำแหน่งที่คุณต้องการ แผ่นสไตล์ CSS ภายในสามารถรับได้โดยการได้รับองค์ประกอบเพื่อให้คุณสามารถเพิ่มสไตล์ให้กับมันโดยใช้ InnerHTML และเพิ่มเข้าไปในลูป นอกจากนี้ยังมีเครื่องชั่งมากมายดังนั้นคุณสามารถใช้ลูปเพื่อเพิ่มซึ่งช่วยประหยัดเวลาและความพยายาม สำหรับเวลาที่เหลือคุณสามารถดำเนินการฟังก์ชั่นทุก ๆ 1 วินาทีเพื่อให้มันจะย้าย
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น