Эта статья разделяет функции оценки, аналогичные библиотеке Taobao и Baidu, а реализация JS предназначена для вашей ссылки. Конкретный контент заключается в следующем
Эффект показан на картинке:
Пять пятиконечных звезд размещены в пяти столбцах таблицы. Ниже приведено <p>, используемый для отображения результатов оценки; Код заключается в следующем:
<body onload = "changebg ()"> <table align = "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> </table> <p align = "center" id = " id = "Оценка"> </label> очки </p> </body>
Событие на загрузке тела связано с методом, а код JS выглядит следующим образом:
<script type = "text/javascript"> function getIndex (arr, element) {// аргументы: массив, элемент; вернуть индекс элемента брата для (var i = 0; i <arr.length; i ++) {if (arr [i] == element) {return i; }} return -1; } function changebg () {// Установить каждый TD, чтобы получить атрибут Focus [вы также можете установить атрибут onclick] var caneaving = document.getElementbyid ("maintable"); // Получить таблицу, которая должна быть установлена var tds = сохранить. GetElementsByTagName ("TD"); // Получить все ячейки в таблице Document.getElementById ("result"). Style.display = "none"; // Установить результат оценки в скрытый для (var i = 0; i <tds.length; i ++) {var td = tds [i]; td.onfocus = getonfocus; td.style.cursor = "pointer"; // Установить мышь для ручной формы на функцию Pentagram}} getOnfocus () {// Установить фокус события TD, var ancientable = document.getElementbyId ("maintable"); var tds = searnable.getelementsbytagname ("td"); var index = getIndex (tds, this); // Возврат индекса события ответа Это представляет элемент, который запустил это событие document.getElementbyId («result»). Style.display = ""; // После получения оценки отобразите result document.getElementById ("Score"). InnerText = index + 1; for (var i = 0; i <index+1; i ++) {tds [i] .style.color = "red"; } for (var i = index+1; i <tds.length; i ++) {tds [i] .style.color = "black"; }} </script>Код JS в основном состоит из трех функций;
①: changebg (); функция, которая связывает событие на загрузке тела; Для достижения связывания события OnFocus с каждым элементом TD;
②: getonfocus (); конкретная реализация события Onfocus элемента TD;
③: getIndex (); Есть два параметра, один - это массив сбора элементов TD, а другой - элемент TD соответствующего события. Обратите внимание на использование этого ключевого слова. В основном он возвращает индекс элементов соответствующего события. Чтобы отобразить цвет перед элементом события ответа в качестве красного, последующие элементы отображаются как черные;
Выше приведено в этой статье, я надеюсь, что для всех будет полезно изучить программирование JavaScript.