当前位置：首页 > JavaScript

js 实现评分

2026-02-02 08:23:59JavaScript

实现评分功能（五星评分）

在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>当前评分: <span id="rating-value">0</span> 星</p>

CSS部分

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

.star {
  color: #ccc;
}

.star.hover {
  color: #ffcc00;
}

.star.active {
  color: #ff9900;
}

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('active', 'hover');
    if (parseInt(star.getAttribute('data-value')) <= value) {
      star.classList.add('hover');
    }
    if (parseInt(star.getAttribute('data-value')) <= currentRating) {
      star.classList.add('active');
    }
  });
}

实现半星评分功能

如果需要更精细的半星评分，可以这样修改：

HTML部分

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

JavaScript部分

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

let currentRating = 0;

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

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

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

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

使用第三方库实现

如果不想从头开始实现，可以使用现成的评分库，如jQuery Raty：

引入库文件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/raty/3.1.1/jquery.raty.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/raty/3.1.1/jquery.raty.min.js"></script>

初始化评分控件

js 实现评分

$('#star-rating').raty({
score: 3, // 默认评分
half: true, // 允许半星
starHalf: 'path/to/star-half.png',
starOff: 'path/to/star-off.png',
starOn: 'path/to/star-on.png',
click: function(score) {
 console.log('用户评分:', score);
}
});

以上方法提供了从简单到复杂的评分实现方案，可以根据项目需求选择合适的实现方式。