วันนี้ฉันเขียนตัวอย่างที่ยอดเยี่ยมอีกอย่าง: ระบบการจัดอันดับดาว (สามารถปรับแต่งจำนวนดาวและข้อมูลการแสดงผล)
sufustar.star (); ใช้ค่าเริ่มต้นของ 5 ดาวข้อมูลเริ่มต้น
var msg = [...... ]; sufustar.star (10, msg); จำนวนดาวที่กำหนดเองคือ 10, ข้อมูลการแสดงผล, ค่าเริ่มต้นรูปแบบการอ้างอิงรูปแบบ, จำนวนดาวต้องสอดคล้องกับจำนวนดาว;
การใช้ตัวอย่างบางส่วนด้วยตัวคุณเองมีข้อได้เปรียบซึ่งสามารถเพิ่มความสามารถในการใช้คะแนนความรู้ต่าง ๆ และทดสอบจุดอ่อนของคุณเอง! เมื่อค้นพบแล้วให้ค้นหาเอกสาร API ทันทีและทำขึ้นมา!
ฉันไม่รู้ว่าฉันโง่เกินไป แต่ตัวอย่างนี้เขียนขึ้นทั้งวัน!
อย่าพูดเรื่องไร้สาระมาพูดคุยเกี่ยวกับจุดความรู้ที่เกี่ยวข้องในตัวอย่างนี้:
1. ใช้เส้นขอบ CSS เพื่อวาดรูปสามเหลี่ยมและใช้ก่อนที่จะเพิ่มลงในองค์ประกอบอื่น ๆ
2. เรียนรู้วิธีใช้ CSS เพื่อค้นหาองค์ประกอบ
3. ตัวแทนสำหรับการเรียนรู้เหตุการณ์;
4. วิธีเพิ่มประสิทธิภาพประสิทธิภาพ
5. แอปพลิเคชันของวิธีการจับคู่ของวัตถุสตริงและแอปพลิเคชันของนิพจน์ทั่วไป
6. การลงทะเบียนกิจกรรมและการจัดการเหตุการณ์ต้องใช้วิธีการเขียนที่เข้ากันได้กับ IE;
7. เรียนรู้วิธีใช้ '||' ในการตั้งค่าเริ่มต้นสำหรับตัวแปร
8. ทำให้รหัสง่ายขึ้น: นำรหัสที่อาจทำซ้ำและเขียนลงในฟังก์ชั่นแยกกัน
ด้านล่างเป็นรหัสที่สมบูรณ์พร้อมความคิดเห็น หากคุณไม่เข้าใจโปรดตรวจสอบเอกสาร ด้วยระดับปัจจุบันของฉันฉันสามารถเขียนได้เช่นนี้เท่านั้น หากคุณมีคำแนะนำที่ดีโปรดชี้ให้เห็น!
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0; Padding: 0; } #Star {ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ขวา: 0; ด้านบน: 30px; ด้านล่าง: 0; มาร์จิ้น: อัตโนมัติ; ความกว้าง: 80%; ขนาดตัวอักษร: 12px; } #star-div {margin: 5px; ขนาดตัวอักษร: 0; } #star-div a {display: inline-block; ความกว้าง: 21px; ความสูง: 21px; ความเป็นมา: URL (http://files.cnblogs.com/files/susufufu/star0.gif) ไม่ต้องทำซ้ำ } #star-div .on {พื้นหลัง: url (http://files.cnblogs.com/files/susufufu/star1.gif) ไม่มีการตอบสนอง; } #star-info {ตำแหน่ง: สัมบูรณ์; ด้านบน: 55px; ซ้าย: -30px; แสดง: ไม่มี; ความกว้าง: 155px; ความสูง: 50px; Padding: 2px; ความสูงของสาย: 17px; แนวชายแดน: 8px; พื้นหลังสี: ทอง; z-index: 5; } #star-info: ก่อน {เนื้อหา: ''; ขอบด้านล่าง: 10px Solid Gold; ชายแดนซ้าย: 10px Solid RGBA (0,0,0,0); Border-Right: 10px Solid RGBA (0,0,0,0); ตำแหน่ง: สัมบูรณ์; ซ้าย: 35px; ด้านบน: -10px; } #star-span {line-height: 14px} #star-info strong, #star-span strong {color: red; } </style> <script> window.onload = function () {var sufustar = function () {// ฟังก์ชั่นฟังก์ชั่นเครื่องมือ gbyid (id) {return document.getElementById (id);} ฟังก์ชัน addevent (elem, type, func) {// if (elem.attachevent) {elem.attachevent ('on'+type, func)}} ฟังก์ชั่น getindex (เหตุการณ์) {// เข้ากันได้กับ IE var e = เหตุการณ์ || window.event; var t = e.target || E.Srelement; if (t.tagname.toLowerCase () === 'a') {return parseint (t.innerhtml); }} ฟังก์ชั่น showinfo (ดัชนี, msg) {var info = gbyid ('star-info'); info.style.display = 'block'; info.style.left = ดัชนี*21-51+'px'; info.innerhtml = "<strong>"+ดัชนี+'คะแนน'+msg [index-1] .match (/( .+)/ |/) [1]+'<br />'+'</strong> } ฟังก์ชั่น appenstar (elem, nums) {var fragment = document.createdocumentFragment (); // เพื่อปรับปรุงประสิทธิภาพเนื่องจาก DocumentFragment ถูกนำมาใช้ในการผนวกในครั้งเดียวหน้าจะได้รับการ reerendered ครั้งเดียวสำหรับ (var i = 0; i <nums; i ++) {var a = document.createElement ('a'); a.innerhtml = i+1; A.href = "JavaScript:;"; // พฤติกรรมเริ่มต้นของการปิดกั้นเบราว์เซอร์คลิก Fragment.AppendChild (A); } Elem.AppendChild (FRAG); } // ฟังก์ชั่นฟังก์ชั่นร่างกาย (NUM, MyMSG) {var n = num || 5; // เมื่อ NUM มีค่าให้ใช้ค่าและหากไม่มีค่าให้ใช้ค่าเริ่มต้น 5; var clickstar = currentstar = 0; // clickstar บันทึกสถานะคลิก var msg = mymsg || ["ไม่พอใจมาก | มันแย่เกินไปไม่สอดคล้องกับคำอธิบายของผู้ขายอย่างจริงจังไม่พอใจมาก", "ไม่พอใจ | เสียหายบางส่วนไม่สอดคล้องกับคำอธิบายของผู้ขาย พอใจ | คุณภาพดีมากสอดคล้องกับคำอธิบายของผู้ขายพอใจมาก "]; var starContainer = gbyid ('star-div'); Appenstar (StarContainer, N); Addevent (StarContainer, 'Mouseover', มากกว่า); // ใช้โหมดพร็อกซีเหตุการณ์ (เหตุการณ์พร็อกซีผ่านองค์ประกอบหลักของแท็ก <a>) addevent (starContainer, 'mouseout', ออก); AddEvent (StarContainer, 'คลิก', คลิก); ฟังก์ชั่นมากกว่า (เหตุการณ์) {ถ้า (getIndex (เหตุการณ์)) {// ถ้า getIndex (เหตุการณ์) ไม่สามารถรับค่าได้หมายความว่าเป้าหมายของเหตุการณ์ทริกเกอร์ปัจจุบันไม่ใช่ <a> ดัชนีแท็ก var = getIndex (เหตุการณ์); เปลี่ยน (ดัชนี); showinfo (ดัชนี, ผงชูรส); }} ฟังก์ชั่น OUT (เหตุการณ์) {Change (); // ตั้งค่าคะแนนเป็นสถานะคลิกคลิก gbyid ('star-info'). style.display = 'ไม่มี'} ฟังก์ชั่นคลิก (เหตุการณ์) {ถ้า (getIndex (เหตุการณ์)) {var index = getIndex (เหตุการณ์); clickstar = ดัชนี; // บันทึกสถานะการคลิก gbyid ('star-info'). style.display = 'none'; gbyid ('star -span'). innerhtml = "<strong>" + ดัชนี + 'point' + msg [ดัชนี - 1]. -match (/(+)/ |/) [1] + '</strong>' + '<br/>' + msg [ดัชนี - 1] .match (// | (. +)/) }} การเปลี่ยนแปลงฟังก์ชั่น (ดัชนี) {currentstar = index || clickstar; สำหรับ (var i = 0; i <n; i ++) {starContainer.children [i] .className = i <currentStar? 'on': ''}}} return {star: star}} (); // () ที่นี่หมายความว่าฟังก์ชั่นจะดำเนินการทันทีเพื่อให้ตัวแปรซูฟัสตาร์สามารถเรียกค่าส่งคืนของฟังก์ชั่นที่ไม่ระบุชื่อดาวฤกษ์ // การเรียกใช้การเรียก: sufustar.star (NUM, mymsg) พารามิเตอร์สามารถว่างเปล่าพารามิเตอร์ NUM, mymsg จะถูกตั้งค่าเป็นค่าเริ่มต้น Sufustar.star () } </script> </head> <body> <div id = "star"> <span> คลิกที่ดวงดาวเพื่อให้คะแนน: </span> <div id = "star-div"> </div> <span id = "star-span"> </span> <p id = "star-info"> </p>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น