Cet article partage les fonctions de notation similaires à la bibliothèque Taobao et Baidu, et l'implémentation JS est pour votre référence. Le contenu spécifique est le suivant
L'effet est montré dans l'image:
Les cinq étoiles à cinq points sont placées dans les cinq colonnes d'une table. Ce qui suit est un <p> utilisé pour afficher les résultats du score; Le code est le suivant:
<body onload = "changebg ()"> <table align = "Center" cellpadding = "0" cellpacing = "0" id = "mainable"> <tr style = "font-size: 30px;"> <Td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> </tr> </pable> <p align = "Center" id = "Result"> Vous avez évalué <label ID = "Score"> </ POSE> </ PORTA
L'événement Onload du corps est lié à une méthode, et le code JS est le suivant:
<script type = "text / javascript"> function getIndex (arr, élément) {// arguments: array, élément; Renvoie l'index de l'élément de frère pour (var i = 0; i <arr.length; i ++) {if (arr [i] == élément) {return i; }} return -1; } fonction changebg () {// Définissez chaque TD pour obtenir l'attribut de mise au point [vous pouvez également définir l'attribut onClick] var maintenue = document.getElementById ("mainable"); // Obtenez le tableau qui doit être défini var tds = maintenue.getElementsByTagName ("TD"); // Obtenez toutes les cellules dans le tableau Document.getElementById ("Result"). Style.display = "None"; // définit le résultat du score sur Hidden for (var i = 0; i <tds.length; i ++) {var td = tds [i]; td.onfocus = getOnfocus; td.style.cursor = "pointeur"; // pour définir la souris en forme de main sur la fonction pentagram}} getOnfocus () {// définir l'événement de mise au point de td, var maintenable = document.getElementById ("maintable"); var tds = maintenable.getElementsByTagName ("td"); var index = getIndex (tds, this); // Renvoie l'index de l'événement de réponse Cela représente l'élément qui a déclenché ce document d'événement.getElementById ("result"). Style.display = ""; // Après avoir obtenu le score, affichez le document de résultat.getElementById ("Score"). InnerText = index + 1; for (var i = 0; i <index + 1; i ++) {tds [i] .style.color = "red"; } pour (var i = index + 1; i <tds.length; i ++) {tds [i] .style.color = "noir"; }} </ script>Le code JS se compose principalement de trois fonctions;
①: ChangeBg (); une fonction qui lie l'événement Onload du corps; Afin d'atteindre la liaison de l'événement OnFocus à chaque élément TD;
②: getOnfocus (); la mise en œuvre spécifique de l'événement OnFocus de l'élément TD;
③: getIndex (); Il y a deux paramètres, l'un est le tableau de collecte des éléments TD, et l'autre est l'élément TD de l'événement correspondant. Faites attention à l'utilisation de ce mot-clé. Il renvoie principalement l'indice des éléments de l'événement correspondant. Afin d'afficher la couleur avant l'élément de l'événement de réponse en rouge, les éléments suivants sont affichés en noir;
Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.