Este artigo compartilha as funções de pontuação semelhantes à Biblioteca Taobao e Baidu, e a implementação do JS é para sua referência. O conteúdo específico é o seguinte
O efeito é mostrado na imagem:
As cinco estrelas de cinco pontas são colocadas nas cinco colunas de uma mesa. A seguir, é usado para exibir os resultados da pontuação; O código é o seguinte:
<corpo onload = "changebg ()"> <tabela align = "center" CellPadding = "0" CellPacing = "0" id = "Manutenable"> <tr style = "font-size: 30px;"> <Td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> </tr> </tabela> <p align = "center" id = "results>" resultado>
O evento Onload do corpo está vinculado a um método, e o código JS é o seguinte:
<script type = "text/javascript"> function getIndex (arr, element) {// argumentos: array, elemento; Retorne o índice do elemento irmão para (var i = 0; i <arr.length; i ++) {if (arr [i] == element) {return i; }} retornar -1; } function alterobg () {// Defina cada TD para obter o atributo de foco [você também pode definir o atributo onclick] var manuteve = document.getElementById ("manutenção"); // Obtenha a tabela que precisa ser definida var tds = mantida.getElementsByTagName ("td"); // Obtenha todas as células no documento da tabela.getElementById ("resultado"). Style.display = "nenhum"; // Defina o resultado da pontuação para oculto para (var i = 0; i <tds.length; i ++) {var td = tds [i]; td.onfocus = getOnfocus; td.style.cursor = "ponteiro"; // Para definir o mouse a ser em forma de manuseio no pentagrama}} função getOnfocus () {// Defina o evento de foco de TD, var manutenable = document.getElementById ("Manutenable"); var tds = manutenção.getElementsByTagName ("td"); var index = getIndex (TDS, este); // retorna o índice do evento de resposta, isso representa o elemento que acionou este documento de evento.getElementById ("resultado"). Style.display = ""; // Depois de obter a pontuação, exiba o documento de resultado.getElementById ("Score"). InnerText = Index + 1; for (var i = 0; i <index+1; i ++) {tds [i] .style.color = "vermelho"; } para (var i = index+1; i <tds.length; i ++) {tds [i] .style.color = "preto"; }} </script>O código JS consiste principalmente em três funções;
①: ChangeBg (); uma função que vincula o evento ONLOAD do corpo; para obter a ligação do evento ONFocus a cada elemento TD;
②: getOnfocus (); a implementação específica do evento OnFocus do elemento TD;
③: getIndex (); Existem dois parâmetros, um é a matriz de coleta de elementos TD e o outro é o elemento TD do evento correspondente. Preste atenção ao uso dessa palavra -chave. Retorna principalmente o índice dos elementos do evento correspondente. Para exibir a cor antes do elemento do evento de resposta como vermelho, os elementos subsequentes são exibidos como pretos;
O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.