js评分展示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>星级评分示例</title>
<style>
  .star {
    cursor: pointer;
    font-size: 2em;
    color: grey;
  }
  .star.active {
    color: gold;
  }
</style>
</head>
<body>

<div id="rating">
  <span class="star" data-value="1">&#9733;</span>
  <span class="star" data-value="2">&#9733;</span>
  <span class="star" data-value="3">&#9733;</span>
  <span class="star" data-value="4">&#9733;</span>
  <span class="star" data-value="5">&#9733;</span>
</div>

<script>
  const stars = document.querySelectorAll('.star');
  let currentRating = 0;

  stars.forEach(star => {
    star.addEventListener('click', function() {
      currentRating = this.getAttribute('data-value');
      highlightStars();
    });

    star.addEventListener('mouseover', function() {
      const hoverValue = this.getAttribute('data-value');
      highlightStars(hoverValue);
    });

    star.addEventListener('mouseout', function() {
      highlightStars(currentRating);
    });
  });

  function highlightStars(value = currentRating) {
    stars.forEach(star => {
      if (star.getAttribute('data-value') <= value) {
        star.classList.add('active');
      } else {
        star.classList.remove('active');
      }
    });
  }
</script>

</body>
</html>