js 实现星星打分

实现星星打分功能

使用HTML、CSS和JavaScript可以创建一个交互式的星星打分系统。以下是一个完整的实现方法：

HTML结构

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

CSS样式

.star-rating {
  font-size: 24px;
  cursor: pointer;
}

.star {
  color: #ccc;
  transition: color 0.2s;
}

.star.hover {
  color: #ffcc00;
}

.star.active {
  color: #ffcc00;
}

JavaScript逻辑

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

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

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

  star.addEventListener('click', () => {
    currentRating = parseInt(star.getAttribute('data-value'));
    ratingValue.textContent = currentRating;
    highlightStars(currentRating);
  });
});

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

实现细节说明

星星打分系统通过CSS类来控制星星的显示状态。未选中时显示灰色，悬停或选中时显示黄色。

事件处理包括鼠标悬停、离开和点击三种交互方式。鼠标悬停时临时高亮显示星星数量，离开时恢复实际评分状态，点击后锁定评分。

评分值存储在currentRating变量中，并实时显示在页面上。这种方法提供了良好的视觉反馈，用户可以直观地看到自己的选择。

扩展功能

要实现半星评分，可以使用两个并排的半星字符：

<span class="star" data-value="0.5">½</span>
<span class="star" data-value="1">★</span>

增加动画效果可以通过CSS实现：

.star {
  transform: scale(1);
  transition: all 0.2s;
}

.star:hover {
  transform: scale(1.2);
}

这个实现方案简洁高效，适合大多数网站需求，可以根据具体项目调整样式和交互细节。