用css制作星级评分第2/3页

下面我将详细讲解如何用 CSS 制作星级评分的第二/三页。

1. 准备工作

首先，我们需要准备页面所需的 HTML 和 CSS 文件。在 HTML 文件中，我们需要添加一个容器元素，用于承载星级评分，并为每个评分项添加一个用于显示星级的元素。在 CSS 文件中，我们需要定义评分项的样式，包括未选中和选中状态下的样式。

下面是 HTML 和 CSS 文件的代码示例：

HTML:

<div class="rating-container">
  <div class="rating-item">
    <i class="far fa-star"></i>
  </div>
  <<div class="rating-item">
    <i class="far fa-star"></i>
  </div>
  <div class="rating-item">
    <i class="far fa-star"></i>
  </div>
  <div class="rating-item">
    <i class="far fa-star"></i>
  </div>
  <div class="rating-item">
    <i class="far fa-star"></i>
  </div>
</div>

CSS:

.rating-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.rating-item {
  margin: 0.3rem;
  font-size: 2rem;
  color: #ddd;
  cursor: pointer;
}

.rating-item i {
  transition: color 0.2s;
}

.rating-item i:hover,
.rating-item i.active {
  color: orange;
}

2. 实现效果

实现星级评分的效果，我们需要结合 JavaScript 来实现视觉反馈和数据统计。在 JavaScript 中，我们可以监听用户的点击事件，并根据用户的行为来更新评分。我们需要定义两个变量，用于记录评分和评分项是否被选中。然后，我们用一个 for 循环来遍历评分项，并为每个评分项添加点击事件。

下面是 JavaScript 文件的代码示例：

JavaScript:

const ratingItems = document.querySelectorAll('.rating-item');
const ratingContainer = document.querySelector('.rating-container');
let ratingValue;

ratingContainer.onclick = function(event) {
  const target = event.target;
  const targetClass = Array.from(target.classList);

  if (targetClass.includes('rating-item')) {
    ratingItems.forEach(item => {
      item.classList.remove('active');
    });
    target.classList.add('active');
    ratingValue = target.dataset.value;
  }
};

3. 示例说明

示例1

在第一次加载页面后，所有评分项的颜色均为灰色，表示用户尚未提交评分。当用户点击一个评分项时，该评分项及之前的所有评分项均会变为黄色，表示用户已提交了评分。同时，页面中会记录用户提交的评分数据。

示例2

在用户提交评分后，用户可以继续点击其他的评分项来更新评分。当用户重新提交新的评分后，之前的评分项及颜色将会被重置，用户的评分数据也会被更新。

这个就是如何用 CSS 制作星级评分的完整攻略，希望可以对你有所帮助。