当前位置：首页 > JavaScript

js实现星级

2026-03-14 21:44:19JavaScript

实现星级评分的JavaScript方法

使用纯JavaScript实现星级评分功能，可以通过DOM操作和事件监听完成。以下是一个基础实现示例：

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 {
  font-size: 24px;
  color: #ccc;
  cursor: pointer;
}
.star.active {
  color: gold;
}

JavaScript逻辑

document.addEventListener('DOMContentLoaded', function() {
  const stars = document.querySelectorAll('.star');
  const ratingValue = document.getElementById('rating-value');
  let currentRating = 0;

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

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

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

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

使用Font Awesome图标的增强版

如需使用Font Awesome图标替代Unicode星星，可修改HTML部分：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<div class="star-rating">
  <i class="far fa-star" data-value="1"></i>
  <i class="far fa-star" data-value="2"></i>
  <i class="far fa-star" data-value="3"></i>
  <i class="far fa-star" data-value="4"></i>
  <i class="far fa-star" data-value="5"></i>
</div>

相应修改CSS中的选择器：

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

实现半星评分功能

要实现半星评分效果，可以使用双倍数量的星星并调整显示逻辑：

js实现星级

// 修改highlightStars函数
function highlightStars(value) {
  const fullStars = Math.floor(value);
  const hasHalfStar = value % 1 >= 0.5;

  stars.forEach(star => {
    const starValue = parseInt(star.getAttribute('data-value'));
    star.classList.remove('fas', 'far', 'active');

    if (starValue <= fullStars) {
      star.classList.add('fas', 'active');
    } else if (starValue === fullStars + 1 && hasHalfStar) {
      star.classList.add('fas', 'fa-star-half-alt', 'active');
    } else {
      star.classList.add('far');
    }
  });
}