当前位置：首页 > JavaScript

js实现评分

2026-04-04 04:55:11JavaScript

实现评分功能的方法

HTML结构 创建一个包含评分星星的容器，通常使用div或span元素包裹多个span或i元素表示星星。

<div class="rating">
  <span data-value="1">★</span>
  <span data-value="2">★</span>
  <span data-value="3">★</span>
  <span data-value="4">★</span>
  <span data-value="5">★</span>
</div>
<p>当前评分: <span id="current-rating">0</span></p>

CSS样式 为星星添加基本样式，包括默认颜色和悬停效果。

.rating span {
  font-size: 24px;
  color: #ccc;
  cursor: pointer;
  transition: color 0.2s;
}

.rating span:hover,
.rating span.active {
  color: #ffcc00;
}

JavaScript逻辑 通过事件监听实现交互功能，包括点击评分和悬停预览。

const stars = document.querySelectorAll('.rating span');
const currentRating = document.getElementById('current-rating');

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

  star.addEventListener('mouseout', function() {
    const currentValue = parseInt(currentRating.textContent);
    highlightStars(currentValue);
  });

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

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

进阶功能实现

保存评分状态 使用localStorage保存用户选择的评分，页面刷新后保持状态。

// 读取保存的评分
const savedRating = localStorage.getItem('userRating');
if (savedRating) {
  currentRating.textContent = savedRating;
  highlightStars(savedRating);
}

// 修改点击事件保存评分
star.addEventListener('click', function() {
  const value = parseInt(this.getAttribute('data-value'));
  currentRating.textContent = value;
  localStorage.setItem('userRating', value);
  highlightStars(value);
});

半星评分实现 修改HTML结构支持半星评分，增加更精细的评分选择。

js实现评分

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