基于宽度的星级评价系统：如何实现点击选星功能？

嘿，这就帮你搞定可点击的星级评价系统！你这套基于宽度的实现思路很靠谱，咱们只需要补全CSS、调整下HTML结构，再加几行JS逻辑就能实现点击选星的交互了。

1. 补全并优化现有CSS #

先把你没写完的CSS补全，同时添加交互相关的样式细节：

.ratings {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  color: #b1b1b1;
  overflow: hidden;
  cursor: pointer; /* 鼠标悬停显示指针，提示可点击 */
  font-size: 24px; /* 可根据需求调整星号大小 */
}

.empty-stars:before, .full-stars:before {
  content: "★★★★★"; /* 用5个星号作为基础显示内容 */
  letter-spacing: 3px; /* 调整星与星之间的间距 */
}

.full-stars {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #fde16d; /* 填充星的高亮颜色 */
  width: 0; /* 默认初始无选中星 */
  transition: width 0.2s ease; /* 添加平滑过渡动画，提升体验 */
}

2. 调整HTML结构 #

我们需要清晰的层级结构，同时可以加个元素实时显示当前选中的评分：

<div class="ratings">
  <div class="empty-stars"></div>
  <div class="full-stars"></div>
</div>
<p>当前评分：<span id="rating-value">0</span> 星</p>

3. JavaScript实现点击交互逻辑 #

核心思路是监听星级容器的点击事件，通过计算点击位置的比例，转换成对应的星级宽度（每颗星对应20%宽度）：

const ratingsContainer = document.querySelector('.ratings');
const fullStars = ratingsContainer.querySelector('.full-stars');
const ratingValue = document.getElementById('rating-value');
let currentRating = 0; // 保存当前选中的评分宽度

// 点击选星逻辑
ratingsContainer.addEventListener('click', (e) => {
  // 计算点击位置相对于容器的百分比
  const clickRatio = e.offsetX / ratingsContainer.offsetWidth;
  const percentage = clickRatio * 100;
  
  // 按整星计算（每20%对应1颗星），若要支持半星可改为10%的倍数
  const roundedPercentage = Math.round(percentage / 20) * 20;
  // 半星版本：const roundedPercentage = Math.round(percentage / 10) * 10;
  
  // 限制百分比在0-100%之间
  const finalWidth = Math.max(0, Math.min(100, roundedPercentage));
  
  // 更新填充星宽度和显示的评分值
  fullStars.style.width = `${finalWidth}%`;
  ratingValue.textContent = finalWidth / 20;
  currentRating = finalWidth; // 保存当前选中状态
});

// 可选：鼠标悬停预览效果
ratingsContainer.addEventListener('mousemove', (e) => {
  const clickRatio = e.offsetX / ratingsContainer.offsetWidth;
  const percentage = clickRatio * 100;
  const roundedPercentage = Math.round(percentage / 20) * 20;
  const finalWidth = Math.max(0, Math.min(100, roundedPercentage));
  fullStars.style.width = `${finalWidth}%`;
});

// 鼠标离开时恢复到当前选中的评分
ratingsContainer.addEventListener('mouseleave', () => {
  fullStars.style.width = `${currentRating}%`;
});

功能说明 #

• 点击选星：点击星级区域任意位置，会自动选中对应数量的整星（比如点击第3颗星位置，会填充60%宽度，即3颗星）
• 悬停预览：鼠标移动时实时预览选中效果，离开后恢复到之前选中的状态
• 平滑过渡：星级填充有0.2秒的过渡动画，交互更流畅
• 评分同步：实时显示当前选中的星级数量
• 半星支持：如果需要半星评价，只需要修改代码中计算百分比的部分，将20%改为10%即可

内容的提问来源于stack exchange，提问作者Cristi Duma