Для создания звездного рейтинга в HTML сниппете мы можем использовать иконки звезд и небольшой JavaScript код.
1. Сначала добавим CSS стиль для наших звезд. Мы можем использовать иконки в виде шрифтов (например, Font Awesome), изображения или символы Unicode. В этом примере мы будем использовать символы Unicode, так как они являются наиболее гибким способом.
.star { display: inline-block; width: 16px; height: 16px; color: #FFD700; /* желтый цвет */ font-size: 16px; font-family: Arial, sans-serif; }
2. Теперь добавим JavaScript код, чтобы реализовать интерактивность рейтинга. В нашем случае, при наведении мышки на звезду или нажатии на нее, мы устанавливаем соответствующий класс, чтобы подсветить все звезды до этой.
// 1. Получение всех звезд var stars = document.getElementsByClassName('star'); // 2. Добавление обработчика событий для каждой звезды for (var i = 0; i < stars.length; i++) { stars[i].addEventListener('mouseover', starMouseOver); stars[i].addEventListener('mouseleave', starMouseLeave); stars[i].addEventListener('click', starClick); } // 3. Функция для обработки события наведения мыши на звезду function starMouseOver() { var currentStarIndex = Array.prototype.indexOf.call(stars, this); for (var i = 0; i <= currentStarIndex; i++) { stars[i].classList.add('filled'); } } // 4. Функция для обработки события ухода мыши с звезды function starMouseLeave() { for (var i = 0; i < stars.length; i++) { stars[i].classList.remove('filled'); } } // 5. Функция для обработки события клика по звезде function starClick() { var currentStarIndex = Array.prototype.indexOf.call(stars, this); for (var i = 0; i <= currentStarIndex; i++) { stars[i].classList.toggle('selected'); } }
3. Теперь мы можем добавить наши звезды в HTML как сниппет:
<div class="rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> </div>
4. И, наконец, добавим немного CSS стиля для звездного рейтинга:
.rating { display: inline-block; }
Теперь мы получим звездный рейтинг с возможностью интерактивного выставления оценки. При наведении мышки на звезду или нажатии на нее, все предыдущие звезды будут подсвечены, а кликнутые звезды будут отмечены специальным классом.