<div class="star-rating">
  <span class="star" data-value="1">★</span>
  <span class="star" data-value="2">★</span>
  <span class="star" data-value="3">★</span>
  <span class="star" data-value="4">★</span>
  <span class="star" data-value="5">★</span>
</div>
<p>当前评分：<span id="rating-value">0</span></p>

.star-rating {
  font-size: 30px;
  color: #ddd;
  cursor: pointer;
}
.star {
  transition: color 0.2s ease;
}
.star:hover,
.star.active {
  color: #ffc107;
}

const stars = document.querySelectorAll('.star');
const ratingValue = document.getElementById('rating-value');

stars.forEach(star => {
  // 点击事件：设置评分
  star.addEventListener('click', function() {
    const value = this.getAttribute('data-value');
    ratingValue.textContent = value;

    // 移除所有active类
    stars.forEach(s => s.classList.remove('active'));
    // 给当前及之前星星添加active类
    stars.forEach(s => {
      if (s.getAttribute('data-value') <= value) {
        s.classList.add('active');
      }
    });
  });

  // 悬停效果：预览评分
  star.addEventListener('mouseover', function() {
    const value = this.getAttribute('data-value');
    stars.forEach(s => {
      if (s.getAttribute('data-value') <= value) {
        s.style.color = '#ffc107';
      } else {
        s.style.color = '#ddd';
      }
    });
  });

  // 鼠标离开后恢复原始状态（保留已选中的）
  star.addEventListener('mouseout', function() {
    stars.forEach(s => {
      if (s.classList.contains('active')) {
        s.style.color = '#ffc107';
      } else {
        s.style.color = '#ddd';
      }
    });
  });
});