js实现星级

实现星级评分的基本方法

使用HTML和CSS创建星级评分的界面结构。通常用<div>或<span>元素表示星星，并通过CSS设置样式。

<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>

.star-rating {
  font-size: 24px;
}
.star {
  cursor: pointer;
  color: #ccc;
}
.star.active {
  color: #ffcc00;
}

JavaScript实现交互功能

通过事件监听实现鼠标悬停和点击时的星级变化效果。

const stars = document.querySelectorAll('.star');

stars.forEach(star => {
  star.addEventListener('mouseover', () => {
    const value = parseInt(star.getAttribute('data-value'));
    highlightStars(value);
  });

  star.addEventListener('click', () => {
    const value = parseInt(star.getAttribute('data-value'));
    setRating(value);
  });
});

function highlightStars(value) {
  stars.forEach(star => {
    const starValue = parseInt(star.getAttribute('data-value'));
    star.classList.toggle('active', starValue <= value);
  });
}

function setRating(value) {
  localStorage.setItem('rating', value);
  highlightStars(value);
}

// 初始化时检查是否有保存的评分
const savedRating = localStorage.getItem('rating');
if (savedRating) {
  highlightStars(savedRating);
}

实现半星评分

如果需要更精确的半星评分，可以使用双倍数量的星星来表示半星。

<div class="star-rating">
  <span class="star" data-value="0.5">★</span>
  <span class="star" data-value="1">★</span>
  <span class="star" data-value="1.5">★</span>
  <span class="star" data-value="2">★</span>
  <span class="star" data-value="2.5">★</span>
  <span class="star" data-value="3">★</span>
  <span class="star" data-value="3.5">★</span>
  <span class="star" data-value="4">★</span>
  <span class="star" data-value="4.5">★</span>
  <span class="star" data-value="5">★</span>
</div>

使用SVG实现自定义星星

可以使用SVG来创建更精美的星星图标，并通过CSS控制其颜色变化。

<div class="star-rating">
  <svg class="star" data-value="1" viewBox="0 0 24 24">
    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
  </svg>
  <!-- 重复其他星星 -->
</div>

.star {
  width: 24px;
  height: 24px;
  fill: #ccc;
  cursor: pointer;
}
.star.active {
  fill: #ffcc00;
}

响应式设计考虑

确保星级评分在不同设备上都能良好显示，可以使用相对单位。

.star-rating {
  font-size: clamp(16px, 4vw, 32px);
}
.star {
  margin: 0 2px;
}

无障碍访问改进

为屏幕阅读器用户添加ARIA属性，提高可访问性。

<div class="star-rating" role="radiogroup" aria-label="产品评分">
  <span class="star" data-value="1" role="radio" aria-checked="false" aria-label="1星">★</span>
  <!-- 其他星星 -->
</div>

function setRating(value) {
  stars.forEach(star => {
    const starValue = parseInt(star.getAttribute('data-value'));
    const isActive = starValue <= value;
    star.setAttribute('aria-checked', isActive);
    star.classList.toggle('active', isActive);
  });
}