Dieser Artikel teilt die Bewertungsfunktionen ähnlich wie die Bibliothek der Taobao und die Baidu, und die JS -Implementierung bezieht sich auf Ihre Referenz. Der spezifische Inhalt ist wie folgt
Der Effekt wird im Bild gezeigt:
Die fünf Fünf-Punkte-Sterne werden in den fünf Säulen einer Tabelle platziert. Das Folgende ist ein <p>, das zur Anzeige der Score -Ergebnisse verwendet wird. Der Code ist wie folgt:
<body onload = "changeBg ()"> <table align = "center" cellpadding = "0" cellpacing = "0" id = "montierable"> <tr style = "Schriftgröße: 30px;"> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> </tr> </table> <p align = "center" ° C.
Das Onload -Ereignis des Körpers ist an eine Methode gebunden, und der JS -Code lautet wie folgt:
<script type = "text/javaScript"> Funktion getIndex (arr, Element) {// Argumente: Array, Element; Geben Sie den Index des Geschwisterelements für (var i = 0; i <arr.length; i ++) {if (arr [i] == Element) {return i; }} return -1; } function ChangeBg () {// Setzen Sie jedes TD, um das Fokusattribut zu erhalten. // Erhalten Sie die Tabelle, die var tds = gepflegt werden muss. // Alle Zellen in das Tabellendokument erhalten. // Das Score -Ergebnis auf versteckt für (var i = 0; i <tds.length; i ++) {var td = tds [i] festlegen; td.onfocus = getonfocus; td.style.cursor = "pointer"; // Setzen Sie die Maus, die auf der Pentagram-Funktion handelt. var tds = fortzug.getElementsByTagName ("td"); var index = getIndex (tds, this); // Gibt den Index des Antwortereignisses zurück, das das Element darstellt, das dieses Ereignisdokument ausgelöst hat. // Zeigen Sie nach Erhalten der Punktzahl das Ergebnisdokument an. für (var i = 0; i <index+1; i ++) {tds [i] .style.color = "rot"; } für (var i = index+1; i <tds.length; i ++) {tds [i] .style.color = "schwarz"; }} </script>Der JS -Code besteht hauptsächlich aus drei Funktionen;
①: ChangeBg (); eine Funktion, die das Onload -Ereignis des Körpers bindet; um die Bindung des Onfocus -Ereignisses an jedes TD -Element zu erreichen;
②: getonfocus (); die spezifische Implementierung des Onfocus -Ereignisses des TD -Elements;
③: GetIndex (); Es gibt zwei Parameter, eines ist das Sammelarray von TD -Elementen und das andere das TD -Element des entsprechenden Ereignisses. Achten Sie darauf, dieses Schlüsselwort zu verwenden. Es gibt hauptsächlich den Index der Elemente des entsprechenden Ereignisses zurück. Um die Farbe vor dem Antwortelementelement als rot anzuzeigen, werden die nachfolgenden Elemente als schwarz angezeigt.
Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.