บทความนี้แบ่งปันฟังก์ชั่นการให้คะแนนคล้ายกับห้องสมุด Taobao และ Baidu และการใช้งาน JS นั้นใช้สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
เอฟเฟกต์แสดงในภาพ:
ดาวห้าแฉกห้าตัวถูกวางไว้ในคอลัมน์ห้าของตาราง ต่อไปนี้เป็น <p> ที่ใช้เพื่อแสดงผลคะแนน รหัสมีดังนี้:
<body onload = "changebg ()"> <table allign = "center" cellpadding = "0" cellpacing = "0" id = "maintable"> <tr style = "font-size: 30px;"> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> </tr>
เหตุการณ์ Onload ของร่างกายถูกผูกไว้กับวิธีการและรหัส JS มีดังนี้:
<script type = "text/javascript"> ฟังก์ชั่น getIndex (arr, element) {// อาร์กิวเมนต์: อาร์เรย์, องค์ประกอบ; ส่งคืนดัชนีขององค์ประกอบพี่น้องสำหรับ (var i = 0; i <arr.length; i ++) {ถ้า (arr [i] == องค์ประกอบ) {return i; }} return -1; } ฟังก์ชั่น ChangeBg () {// ตั้งค่าแต่ละ TD เพื่อรับแอตทริบิวต์โฟกัส [คุณสามารถตั้งค่าแอตทริบิวต์ onClick] var maintained = document.getElementById ("Maintable"); // รับตารางที่จำเป็นต้องตั้งค่า var tds = maintained.getElementsByTagname ("td"); // รับเซลล์ทั้งหมดในตาราง document.getElementById ("ผลลัพธ์"). style.display = "ไม่มี"; // ตั้งค่าผลลัพธ์คะแนนเป็นที่ซ่อนไว้สำหรับ (var i = 0; i <tds.length; i ++) {var td = tds [i]; td.onfocus = getOnfocus; td.style.cursor = "ตัวชี้"; // ในการตั้งค่าเมาส์ให้เป็นรูปมือบน Pentagram}} ฟังก์ชั่น getOnfocus () {// ตั้งค่าเหตุการณ์โฟกัสของ TD, var review = document.getElementById ("Maintable"); var tds = reviewable.getElementsByTagname ("td"); var index = getIndex (TDS, this); // ส่งคืนดัชนีของเหตุการณ์การตอบสนองนี้แสดงถึงองค์ประกอบที่เรียกใช้เอกสารเหตุการณ์นี้ getElementById ("ผลลัพธ์"). style.display = ""; // หลังจากได้รับคะแนนให้แสดง document.getElementById ("คะแนน"). innerText = ดัชนี + 1; สำหรับ (var i = 0; i <ดัชนี+1; i ++) {tds [i] .style.color = "สีแดง"; } สำหรับ (var i = index+1; i <tds.length; i ++) {tds [i] .style.color = "ดำ"; }} </script>รหัส JS ส่วนใหญ่ประกอบด้วยสามฟังก์ชั่น;
①: ChangeBg (); ฟังก์ชั่นที่ผูกกับเหตุการณ์ ONLOAD ของร่างกาย เพื่อให้บรรลุผลผูกพันของเหตุการณ์ ONFOCS กับแต่ละองค์ประกอบ TD;
②: getonfocus (); การใช้งานเฉพาะของเหตุการณ์ ONFOCUS ขององค์ประกอบ TD;
③: getIndex (); มีสองพารามิเตอร์หนึ่งคืออาร์เรย์คอลเลกชันขององค์ประกอบ TD และอื่น ๆ คือองค์ประกอบ TD ของเหตุการณ์ที่เกี่ยวข้อง ให้ความสนใจกับการใช้คำหลักนี้ ส่วนใหญ่จะส่งคืนดัชนีขององค์ประกอบของเหตุการณ์ที่เกี่ยวข้อง เพื่อที่จะแสดงสีก่อนที่องค์ประกอบเหตุการณ์การตอบสนองเป็นสีแดงองค์ประกอบที่ตามมาจะแสดงเป็นสีดำ
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript