Este artículo comparte las funciones de puntuación similares a la Biblioteca Taobao y Baidu, y la implementación JS es para su referencia. El contenido específico es el siguiente
El efecto se muestra en la imagen:
Las cinco estrellas de cinco puntas se colocan en las cinco columnas de una tabla. Lo siguiente es un <p> utilizado para mostrar los resultados de la puntuación; El código es el siguiente:
<Body Onload = "ChangeBg ()"> <table Align = "Center" CellPadding = "0" CellPacing = "0" ID = "Mantable"> <Tr Style = "Font-Size: 30px;"> <Td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> </tr> </table> <p align = "centro" id = "resultado"
El evento de Onload del cuerpo está vinculado a un método, y el código JS es el siguiente:
<script type = "text/javaScript"> function getIndex (arr, element) {// argumentos: array, elemento; Devuelva el índice del elemento hermano para (var i = 0; i <arr.length; i ++) {if (arr [i] == element) {return i; }} return -1; } function ChangeBg () {// Establezca cada TD para obtener el atributo de enfoque [también puede establecer el atributo OnClick] var mantenido = document.getElementById ("mantenimiento"); // Obtenga la tabla que debe establecerse var tds = mantenido.getElementsBytagName ("td"); // Obtener todas las celdas en la tabla document.getElementById ("resultado"). Style.display = "none"; // Establezca el resultado de puntaje en oculto para (var i = 0; i <tds.length; i ++) {var td = tds [i]; td.onfocus = getOnfocus; td.style.cursor = "puntero"; // Para establecer el mouse para que tenga forma de mano en la función pentagram}} getOnFocus () {// Establezca el evento de enfoque de TD, var mantenible = document.getElementById ("mantenimiento"); var tds = mantenible.getElementsBytagName ("td"); Var index = getIndex (tds, esto); // Devuelve el índice del evento de respuesta esto representa el elemento que activó este evento document.getElementById ("resultado"). Style.display = ""; // Después de obtener la puntuación, muestre el resultado document.getElementById ("puntaje"). Innertext = index + 1; for (var i = 0; i <index+1; i ++) {tds [i] .style.color = "rojo"; } para (var i = index+1; i <tds.length; i ++) {tds [i] .style.color = "negro"; }} </script>El código JS consta principalmente de tres funciones;
①: ChangeBg (); una función que une el evento de encendido del cuerpo; Para lograr la unión del evento Onfocus a cada elemento TD;
②: getonfocus (); la implementación específica del evento Onfocus del elemento TD;
③: getIndex (); Hay dos parámetros, uno es la matriz de colección de elementos TD, y el otro es el elemento TD del evento correspondiente. Presta atención a usar esta palabra clave. Devuelve principalmente el índice de los elementos del evento correspondiente. Para mostrar el color antes del elemento del evento de respuesta como rojo, los elementos posteriores se muestran como negros;
Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.