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

Question

Есть div в котором выводится значение рейтинга, подскажите как можно сделать, чтобы рядом выводились звездочки закрашенные в зависимости от выводимого значения на JS? Вот сам код где происходит вывод значения:

<div class="stat-items">
	<div title="" class="stat-item"><span class="title">Рейтинг:</span> <span class="value">4.50</span></div>
	<div title="" class="stat-item"><span class="title">Просмотры:</span> <span class="value">1</span></div>
</div>

Нужно чтобы вместо слова Рейтинг выводились звездочки соотносящиеся к значению рейтинга. В данном примере величина 4.5

Я нашел пример кода , где происходит нужное действие, только в обратную сторону =) Помогите переделать его под эту задачу. Код примера где реализованы звездочки рейтинга https://jsfiddle.net/0ae4623s/

Answer 1

Думаю, что направлю Вас в нужную сторону.

Без CSS и с округлением до целого:

(function fStarsRate() {
  let aRates = document.querySelectorAll('div.stat-items > div:first-child');
  let nValueRate;
  aRates.forEach(function(el) {
    nValueRate = Math.floor(+el.lastElementChild.innerText);
    el.firstElementChild.innerHTML = '&#9733;'.repeat(nValueRate) + '&#9734;'.repeat(5 - nValueRate);
  });
})()

<div class="stat-items">
  <div title="" class="stat-item"><span class="title">Рейтинг:</span> <span class="value">4.50</span></div>
  <div title="" class="stat-item"><span class="title">Просмотры:</span> <span class="value">1</span></div>
</div>
<div class="stat-items">
  <div title="" class="stat-item"><span class="title">Рейтинг:</span> <span class="value">2.20</span></div>
  <div title="" class="stat-item"><span class="title">Просмотры:</span> <span class="value">0</span></div>
</div>

С применением псевдоэлемента:

(function fStarsRate() {
  let aRates = document.querySelectorAll('div.stat-items > div:first-child');
  let nValueRate, elSpanStars;
  aRates.forEach(function(el) {
    nValueRate = +el.lastElementChild.innerText;
    elSpanStars = el.firstElementChild;
    elSpanStars.innerHTML = '&#9734;&#9734;&#9734;&#9734;&#9734;';
    elSpanStars.style.backgroundSize = (elSpanStars.offsetWidth - elSpanStars.offsetWidth / 5 * nValueRate - 2) + 'px 120px';
  });
})()

div.stat-item:first-child>span.title {
  position: relative;
  display: inline-block;
  color: rgba(240, 245, 255, 0.9);
  font: 40px 'Arial';
  letter-spacing: -4px;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
  background-image: linear-gradient(90deg, white, white);
  background-repeat: no-repeat;
  background-position: 100% 0%;
}

div.stat-item:first-child>span.title:after {
  content: '★★★★★';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  color: #fa0;
  letter-spacing: -4px;
}

<div class="stat-items">
  <div title="" class="stat-item"><span class="title">Рейтинг:</span> <span class="value">4.50</span></div>
  <div title="" class="stat-item"><span class="title">Просмотры:</span> <span class="value">1</span></div>
</div>
<div class="stat-items">
  <div title="" class="stat-item"><span class="title">Рейтинг:</span> <span class="value">2.39</span></div>
  <div title="" class="stat-item"><span class="title">Просмотры:</span> <span class="value">0</span></div>
</div>
<div class="stat-items">
  <div title="" class="stat-item"><span class="title">Рейтинг:</span> <span class="value">3.60</span></div>
  <div title="" class="stat-item"><span class="title">Просмотры:</span> <span class="value">0</span></div>
</div>

БЛОГ НА HUSL

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

Ответы (1 шт):