Как реализовать звездный рейтинг с частичным закрашиванием звезд?

Для реализации звездного рейтинга с частичным закрашиванием звезд в HTML, мы можем использовать несколько способов. Один из самых простых подходов - использование CSS и HTML.

Вот как можно реализовать звездный рейтинг с частичным закрашиванием звезд:

1. Создайте элемент-контейнер, в котором будут расположены звезды рейтинга. Это может быть элемент div с заданным идентификатором или классом:

<div class="rating-container"></div>

2. Внутри элемента-контейнера создайте несколько элементов-звезд, используя элементы span или i (или другие подходящие элементы), с заданными идентификаторами или классами:

<div class="rating-container">
  <span id="star-1" class="star"></span>
  <span id="star-2" class="star"></span>
  <span id="star-3" class="star"></span>
  <span id="star-4" class="star"></span>
  <span id="star-5" class="star"></span>
</div>

3. Напишите CSS-стили для элементов-звезд, чтобы задать их внешний вид. Вы можете использовать символы unicode или картинки в качестве графического представления звезды.

.star {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(star.svg) no-repeat; /* замените star.svg на путь к желаемому изображению звезды */
  background-size: cover;
}

4. Добавьте JavaScript-код для отображения рейтинга с частичным закрашиванием звезд. Вы можете использовать функцию, которая будет вычислять и применять стиль закрашивания звезд в зависимости от рейтинга:

function setRating(rating) {
  var starElements = document.getElementsByClassName("star");
  
  for (var i = 0; i < starElements.length; i++) {
    var starElement = starElements[i];
    var starNumber = i + 1;
    
    if (starNumber <= rating) {
      starElement.style.width = "100%"; // полностью закрашиваем звезду
    } else if (starNumber - rating < 1) {
      var percentage = (starNumber - rating) * 100;
      starElement.style.width = percentage + "%"; // частично закрашиваем звезду
    } else {
      starElement.style.width = "0%"; // не закрашиваем звезду
    }
  }
}

// пример использования функции setRating:
setRating(3.6);

Теперь, при вызове функции setRating с указанием рейтинга (от 1 до 5), звезды будут соответствующим образом закрашены в зависимости от частичного рейтинга.