如何利用js脚本制作星级评分系统_js星级评分脚本编写教程-js教程-PHP中文网

如何利用js脚本制作星级评分系统_js星级评分脚本编写教程

爱谁谁

发布： 2025-11-05 17:21:02

原创

396人浏览过

答案：通过HTML构建五星结构，CSS设置样式与悬停效果，JavaScript实现点击评分与交互反馈。具体描述：使用span标签创建5个星星并设置data-value；CSS定义默认灰色和悬停黄色，并添加过渡动画；JS为每个星绑定click和mouseover事件，点击时更新评分并高亮对应星，悬停时预览评分，离开后保留已选状态，最后可扩展半星或存储功能。

如何利用js脚本制作星级评分系统_js星级评分脚本编写教程

制作一个简单的星级评分系统，可以通过 HTML、CSS 和 JavaScript 实现。用户点击星星图标即可选择评分，鼠标悬停时高亮显示当前选中及之前的星，提升交互体验。下面是一个完整的实现教程。

1. 基础HTML结构

首先创建包含5个星星图标的容器，每个星星用一个标签表示，便于后续绑定事件。

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

登录后复制

2. 使用CSS美化样式

设置星星的大小、颜色，并定义默认和选中状态的样式。

.star-rating {
  font-size: 30px;
  color: #ddd;
  cursor: pointer;
}
.star {
  transition: color 0.2s ease;
}
.star:hover,
.star.active {
  color: #ffc107;
}

登录后复制

3. JavaScript实现交互逻辑

为每个星星添加点击和悬停事件，实现评分选择与预览效果。

微软爱写作

微软出品的免费英文写作/辅助/批改/评分工具

查看详情

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

stars.forEach(star => {
  // 点击事件：设置评分
  star.addEventListener('click', function() {
    const value = this.getAttribute('data-value');
    ratingValue.textContent = value;

    // 移除所有active类
    stars.forEach(s => s.classList.remove('active'));
    // 给当前及之前星星添加active类
    stars.forEach(s => {
      if (s.getAttribute('data-value') <= value) {
        s.classList.add('active');
      }
    });
  });

  // 悬停效果：预览评分
  star.addEventListener('mouseover', function() {
    const value = this.getAttribute('data-value');
    stars.forEach(s => {
      if (s.getAttribute('data-value') <= value) {
        s.style.color = '#ffc107';
      } else {
        s.style.color = '#ddd';
      }
    });
  });

  // 鼠标离开后恢复原始状态（保留已选中的）
  star.addEventListener('mouseout', function() {
    stars.forEach(s => {
      if (s.classList.contains('active')) {
        s.style.color = '#ffc107';
      } else {
        s.style.color = '#ddd';
      }
    });
  });
});

登录后复制