js 实现星星打分

实现星星打分功能

在JavaScript中实现星星打分功能可以通过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 class="rating-value">评分: 0</p>

CSS部分

.star-rating {
  font-size: 24px;
  cursor: pointer;
}
.star {
  color: #ccc;
  transition: color 0.2s;
}
.star:hover,
.star.active {
  color: #ffcc00;
}

JavaScript部分

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

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

    stars.forEach((s, index) => {
      if (index < value) {
        s.classList.add('active');
      } else {
        s.classList.remove('active');
      }
    });

    ratingValue.textContent = `评分: ${value}`;
  });
});

实现半星评分功能

如果需要更精细的半星评分功能，可以这样实现：

HTML部分

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

JavaScript部分

const halfStars = document.querySelectorAll('.half-star');

halfStars.forEach(star => {
  star.addEventListener('click', () => {
    const value = parseFloat(star.getAttribute('data-value'));

    halfStars.forEach(s => {
      const sValue = parseFloat(s.getAttribute('data-value'));
      if (sValue <= value) {
        s.textContent = sValue % 1 === 0 ? '★' : '☆';
        s.style.color = '#ffcc00';
      } else {
        s.textContent = sValue % 1 === 0 ? '★' : '☆';
        s.style.color = '#ccc';
      }
    });
  });
});

实现鼠标悬停效果

为增强用户体验，可以添加鼠标悬停效果：

stars.forEach(star => {
  star.addEventListener('mouseover', () => {
    const value = parseInt(star.getAttribute('data-value'));
    stars.forEach((s, index) => {
      s.style.color = index < value ? '#ffcc00' : '#ccc';
    });
  });

  star.addEventListener('mouseout', () => {
    const activeStar = document.querySelector('.star.active');
    if (!activeStar) return;

    const activeValue = parseInt(activeStar.getAttribute('data-value'));
    stars.forEach((s, index) => {
      s.style.color = index < activeValue ? '#ffcc00' : '#ccc';
    });
  });
});

这些方法提供了完整的星星评分功能实现，包括基本评分、半星评分和交互效果。可以根据实际需求进行调整和扩展。