ใช้ CSS+Native JS เพื่อทำนาฬิกาง่าย ๆ เอฟเฟกต์มีดังนี้
เพื่อให้บรรลุผลกระทบนี้มันจะถูกแบ่งออกเป็นสามส่วนหลัก: HTML, JavaScript และ CSS
ส่วน HTML
ส่วน HTML นั้นค่อนข้างง่ายกำหนดนาฬิกา Div ซึ่งมีต้นกำเนิด, ชั่วโมง, นาที, มือสอง, วันที่และเวลา สำหรับเครื่องชั่งตัวเลขและองค์ประกอบอื่น ๆ บนนาฬิกาเนื่องจากปริมาณค่อนข้างใหญ่มันถูกสร้างขึ้นโดยใช้ JVAScript โดยใช้ JVAScript
<! doctype html> <html> <head> <meta charset = "utf-8"> <link rel = 'stylesheet' href = 'เส้นทางไฟล์ CSS ภายนอก'/> <title> นาฬิกา </title> </head> <body> id = "Hour-line"> </div> <div id = "minute-line"> </div> <div id = "second-line"> </div> <!-วันที่-> <div id = "date-info"> </div> <! </div> </div> <script type = 'text/javascript' src = 'พา ธ ไฟล์ JavaScript ภายนอก'> </script> </body> </html>
ส่วน CSS
ก่อนที่จะเริ่มรหัสมีคุณสมบัติบางอย่างของ CSS ที่ต้องเข้าใจเช่นการวางตำแหน่ง, รัศมีเส้นขอบ, การเปลี่ยนแปลง ฯลฯ
คุณลักษณะตำแหน่ง
แอตทริบิวต์ตำแหน่งระบุประเภทการวางตำแหน่งขององค์ประกอบที่มีห้าค่า: สัมบูรณ์, คงที่, สัมพัทธ์, คงที่, สืบทอด ค่าเริ่มต้นคือคงที่นั่นคือไม่มีการวางตำแหน่งและองค์ประกอบจะปรากฏขึ้นตามการไหลของเอกสารปกติ การใช้งานหลักที่นี่คือสัมบูรณ์และญาติ
ค่า Absulte ตั้งค่าองค์ประกอบเป็นตำแหน่งสัมบูรณ์และวางตำแหน่งเมื่อเทียบกับองค์ประกอบส่วนบนแรกที่วางตำแหน่งโดยไม่คาดคิด ตำแหน่งสามารถวางตำแหน่งผ่าน 'ซ้าย', 'ด้านบน', 'ขวา', 'ด้านล่าง' แอตทริบิวต์; หากองค์ประกอบด้านบนอยู่ในตำแหน่งคงที่ทั้งหมดมันจะอยู่ในตำแหน่งที่สัมพันธ์กับตำแหน่งขององค์ประกอบร่างกาย
ในตัวอย่างนี้ตั้งค่านาฬิกา div ด้านนอกสุดเป็นญาติและองค์ประกอบที่ต่ำกว่าทั้งหมดจะถูกตั้งค่าเป็นการกำหนดตำแหน่งสัมบูรณ์แบบสัมบูรณ์จากนั้นกำหนดตำแหน่งที่สัมพันธ์กับนาฬิกาโดยการตั้งค่าของแอตทริบิวต์เช่นซ้ายและด้านบน
แอตทริบิวต์แนวชายแดน
แอตทริบิวต์แนวชายแดนเพิ่มเส้นขอบโค้งมนให้กับองค์ประกอบ คุณสามารถตั้งค่าขนาดสี่มุมโค้งมน ในตัวอย่างนี้ใช้แอตทริบิวต์นี้เพื่อตั้งค่าองค์ประกอบนาฬิกาเป็นวงกลม
นี่คือตัวอย่าง: 4 องค์ประกอบ DIV ความกว้างและความสูงทั้งหมดคือ 100px และผลกระทบของแนวชายแดนนั้นแตกต่างกัน:
แปลงแอตทริบิวต์
คุณสมบัติการแปลงใช้การหมุน 2D หรือ 3D กับองค์ประกอบซึ่งช่วยให้เราสามารถหมุนสเกลย้ายหรือเอียงองค์ประกอบ ในตัวอย่างนี้ชั่วโมง, นาที, วินาที, ขนาด ฯลฯ ล้วนถูกหมุนโดยใช้แอตทริบิวต์การแปลง นอกจากนี้แอตทริบิวต์การแปลงแหล่งกำเนิดสามารถตั้งค่าตำแหน่งจุดพื้นฐานขององค์ประกอบ
รหัสสำหรับส่วน CSS
/*global*/*{margin: 0; Padding: 0;}. นาฬิกา {width: 400px; ความสูง: 400px; ชายแดน: 10px Solid #333; Box-Shadow: 0PX 0PX 20PX 3PX #444 สิ่งที่ใส่เข้าไป; แนวชายแดน: 210px; ตำแหน่ง: ญาติ; มาร์จิ้น: 5px auto; z-index: 10; พื้นหลังสี:#f6f6f6;}/* หมายเลขนาฬิกา*/. นาฬิกา-นัม {width: 40px; ความสูง: 40px; ขนาดตัวอักษร: 22px; TEXT-ALIGN: CENTER; สายไฟ: 40px; ตำแหน่ง: สัมบูรณ์; z-index: 8; สี:#555; Font-Family: Fantasy, 'Trebuchet MS';}. em_num {font-size: 28px;}/* pointer*/. นาฬิกา-บรรทัด {ตำแหน่ง: สัมบูรณ์; z-index: 20;}. ชั่วโมงบรรทัด {width: 100px; ความสูง: 4px; ด้านบน: 198px; ซ้าย: 200px; พื้นหลังสี:#000; แนวชายแดน: 2px; Transform-Origin: 0 50%; Box-shadow: 1px -3px 8px 3px #aaa;}. นาที-บรรทัด {width: 130px; ความสูง: 2px; ด้านบน: 199px; ซ้าย: 190px; พื้นหลังสี:#000; Transform-Origin: 7.692% 50%; Box-shadow: 1px -3px 8px 1px #aaa;}. บรรทัดที่สอง {width: 170px; ความสูง: 1px; ด้านบน: 199.5px; ซ้าย: 180px; พื้นหลังสี:#F60; Transform-Origin: 11.765% 50%; Box -Shadow: 1px -3px 7px 1px #bbb;}/* Origin*/. Origin {Width: 20px; ความสูง: 20px; แนวชายแดน: 10px; พื้นหลังสี:#000; ตำแหน่ง: สัมบูรณ์; ด้านบน: 190px; ซ้าย: 190px; z-index: 14;}/* วันที่-เวลา*/. date-info {width: 160px; ความสูง: 28px; ความสูงของสาย: 28px; TEXT-ALIGN: CENTER; ตำแหน่ง: สัมบูรณ์; ด้านบน: 230px; ซ้าย: 120px; z-index: 11; สี:#555; Font-Weight: ตัวหนา; Font-Family: 'Microsoft Yahei';}. Time-info {Width: 92px; ความสูง: 30px; ระดับความสูง: 30px; TEXT-ALIGN: CENTER; ตำแหน่ง: สัมบูรณ์; ด้านบน: 270px; ซ้าย: 154px; z-index: 11; พื้นหลังสี:#555; Padding: 0; Box-shadow: 0px 0px 9px 2px #222 inset;}. เวลา {width: 30px; ความสูง: 30px; TEXT-ALIGN: CENTER; ลอย: ซ้าย; สี: #FFF; Font-Weight: bold;} #นาที-เวลา {ชายแดนซ้าย: 1px Solid #FFFF; Border-Right: 1px Solid #FFFF;}/* มาตราส่วน*/. นาฬิการะดับ {Width: 195px; ความสูง: 2px; Transform-Origin: 0% 50%; z-index: 7; ตำแหน่ง: สัมบูรณ์; ด้านบน: 199px; ซ้าย: 200px;}. scale-show {width: 12px; ความสูง: 2px; พื้นหลังสี:#555; ลอย: ซ้าย;}. สเกลซ่อน {ความกว้าง: 183px; ความสูง: 2px; ลอย: ซ้าย;}ส่วน JavaScript
ไม่มีอะไรจะพูดเกี่ยวกับส่วน JS สำหรับการดำเนินการ DOM อย่างง่ายฟังก์ชั่น setInterval จะถูกดำเนินการทุกวินาทีและมุมของตัวชี้และเวลาที่แสดงจะเปลี่ยนไป รหัสมีดังนี้
(function () {window.onload = initnumxy (200, 160, 40,40); var hour_line = document.getElementById ("ชั่วโมง-บรรทัด"); var minute_line = document.getElementById ("นาที-บรรทัด"); var second_line = document.getElementByid ( 'วันอาทิตย์', 'วันจันทร์', 'อังคาร', 'อังคาร', 'วันศุกร์', 'วันอาทิตย์', 'วันอาทิตย์', 'อังคาร', 'วันศุกร์', 'วันอาทิตย์', 'วันอาทิตย์', 'วันอาทิตย์', 'วันอาทิตย์' วันอาทิตย์ 'วันอาทิตย์' วันอาทิตย์ 'วันอาทิตย์' วันอาทิตย์ 'วันอาทิตย์' วันอาทิตย์ 'วันอาทิตย์' วันอาทิตย์ 'วันอาทิตย์ 'วันอาทิตย์', 'วันอาทิตย์', 'วันอาทิตย์', 'วันอาทิตย์', 'วันอาทิตย์', 'วันอาทิตย์', 'วันอาทิตย์', 'วันอาทิตย์', 'วันอาทิตย์', 'วันอาทิตย์', 'วันอาทิตย์', 'วันอาทิตย์', 'วันอาทิตย์', วันอาทิตย์ 'วันอาทิตย์' Document.getElementById ("ชั่วโมง"); นาที = this_day.getminutes (); (this_day.getmonth () + 1); (นาที*6 - 90) + 'deg)'; this_day.gethours (): this_day.gethours (); this_day.getSeconds ();} setInterval (settime, 1000); : r - 0.5 * r - 0.5 * h}, {"ซ้าย": r + r - 0.5 * w, "top": r - 0.5 * h}, {"ซ้าย": r + r - 0.5 * w, "top": r - 0.5 * h}, {"ซ้าย": r + 0.5 * r * 1.73205 - 05 * w, " : r + 0.5 * r - 0.5 * w, "top": r + 0.5 * r * 1.732 - 0.5 * h}, {"ซ้าย": r - 0.5 * w, "top": r + 0.5 * r * 1.732 - 0.5 * h}, {"ซ้าย": r - 0.5 * r - 05 * w : r - 0.5 * r - 0.5 * w, "top": r + 0.5 * r * 1.732 - 0.5 * h}, {"ซ้าย": r - 0.5 * r * 1.73205 - 0.5 * w, "top": r + 0.5 * r - 0.5 * h}, {"ซ้าย": r - 05 * r - 05 * 0.5 * w, "top": r - 0.5 * r - 0.5 * h}, {"ซ้าย": r - 0.5 * r - 0.5 * h}, {"ซ้าย": r - 0.5 * r - 0.5 * w, "top": r - 0.5 * r * 1.73205 - 0.5 * h} 1.73205 - 0.5 * H}, {"ซ้าย": r - 0.5 * r - 0.5 * h}, {"ซ้าย": r - 0.5 * r - 0.5 * w, "top": r - 0.5 * r * 1.73205 - 0.5 * h}, {"ซ้าย" document.getElementById ("นาฬิกา"); } clock_num = document.getElementByClassName ("นาฬิกา"); i <60; {scale [i] .style.transform = "rotate (" + (i * 6 - 90) + "deg)";}}}) ();ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น