JS如何实现五星好评效果

发布时间：2021-09-10 13:05:16 作者：小新
来源：亿速云阅读：135

# JS如何实现五星好评效果

## 目录
1. [引言](#引言)
2. [基础HTML结构](#基础html结构)
3. [CSS样式设计](#css样式设计)
4. [JavaScript核心逻辑](#javascript核心逻辑)
   - [4.1 事件监听](#41-事件监听)
   - [4.2 动态评分计算](#42-动态评分计算)
   - [4.3 数据持久化](#43-数据持久化)
5. [动画效果增强](#动画效果增强)
6. [响应式设计](#响应式设计)
7. [无障碍访问](#无障碍访问)
8. [完整代码示例](#完整代码示例)
9. [性能优化](#性能优化)
10. [跨框架实现](#跨框架实现)
11. [总结](#总结)

---

## 引言

在当今的Web应用中，用户评分系统已成为收集反馈的重要工具。五星好评效果因其直观性和普适性，被广泛应用于电商、内容平台等场景。本文将深入探讨如何使用原生JavaScript实现一个完整的五星评分系统，包含交互逻辑、视觉反馈和数据处理等核心功能。

---

## 基础HTML结构

```html
<div class="star-rating">
  <fieldset class="stars">
    <input type="radio" id="star5" name="rating" value="5" />
    <label for="star5" aria-label="5 stars">★</label>
    
    <input type="radio" id="star4" name="rating" value="4" />
    <label for="star4" aria-label="4 stars">★</label>
    
    <!-- 3-1星省略 -->
  </fieldset>
  <output class="rating-value">0</output>
</div>

关键点说明： - 使用fieldset和radio实现互斥选择 - aria-label增强可访问性 - output元素动态显示当前评分

CSS样式设计

.star-rating {
  --active-color: #ffb400;
  --inactive-color: #dcdcdc;
  font-size: 2rem;
}

.stars {
  border: none;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
}

.stars input {
  position: absolute;
  opacity: 0;
}

.stars label {
  cursor: pointer;
  color: var(--inactive-color);
  transition: color 0.2s;
}

.stars input:checked ~ label,
.stars label:hover,
.stars label:hover ~ label {
  color: var(--active-color);
}

/* 实现半星效果 */
.stars input:checked + label {
  position: relative;
}
.stars input:checked + label::after {
  content: '★';
  position: absolute;
  left: 0;
  color: var(--active-color);
  width: 50%;
  overflow: hidden;
}

样式技巧： - CSS变量管理颜色 - Flex反向布局简化交互逻辑 - 相邻兄弟选择器(~)实现批量控制 - 伪元素实现半星效果

JavaScript核心逻辑

4.1 事件监听

const container = document.querySelector('.star-rating');
const stars = container.querySelectorAll('input');
const output = container.querySelector('.rating-value');

// 鼠标交互
container.addEventListener('mouseover', (e) => {
  if (e.target.tagName === 'LABEL') {
    const hoverValue = e.target.htmlFor.replace('star', '');
    highlightStars(hoverValue);
  }
});

// 点击选择
stars.forEach(star => {
  star.addEventListener('change', () => {
    output.textContent = star.value;
    saveRating(star.value);
  });
});

4.2 动态评分计算

function highlightStars(value) {
  stars.forEach(star => {
    const label = star.nextElementSibling;
    label.style.color = 
      star.value <= value ? '#ffb400' : '#dcdcdc';
  });
}

4.3 数据持久化

// 使用LocalStorage存储
function saveRating(value) {
  localStorage.setItem('userRating', value);
}

// 页面加载时恢复
function loadRating() {
  const saved = localStorage.getItem('userRating');
  if (saved) {
    document.querySelector(`#star${saved}`).checked = true;
    output.textContent = saved;
  }
}

动画效果增强

CSS关键帧动画：

@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.stars input:checked ~ label {
  animation: bounce 0.5s;
}

粒子效果实现：

function createParticles(x, y) {
  for (let i = 0; i < 8; i++) {
    const particle = document.createElement('div');
    particle.className = 'particle';
    // 设置粒子样式和动画...
    container.appendChild(particle);
    setTimeout(() => particle.remove(), 1000);
  }
}

响应式设计

媒体查询适配：

@media (max-width: 600px) {
  .star-rating { font-size: 1.5rem; }
}

触摸事件支持：

container.addEventListener('touchmove', (e) => {
  const touch = e.touches[0];
  const element = document.elementFromPoint(touch.clientX, touch.clientY);
  // 处理触摸滑动评分...
});

无障碍访问

ARIA增强：

<div role="radiogroup" aria-labelledby="rating-label">
  <div id="rating-label">请为商品评分</div>
  <!-- 评分元素 -->
</div>

键盘导航支持：

container.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
    // 处理键盘左右键导航...
  }
});

完整代码示例

查看完整实现代码

性能优化

事件委托：减少事件监听器数量
防抖处理：优化频繁的鼠标移动事件
CSS硬件加速：使用transform提升动画性能
虚拟DOM：在大规模使用时考虑

跨框架实现

React版本

function StarRating() {
  const [rating, setRating] = useState(0);
  return (
    <div>
      {[...Array(5)].map((_, i) => (
        <Star 
          key={i} 
          filled={i < rating}
          onClick={() => setRating(i + 1)}
        />
      ))}
    </div>
  );
}

Vue版本

<template>
  <div class="stars">
    <span 
      v-for="i in 5" 
      :class="{ 'filled': i <= modelValue }"
      @click="$emit('update:modelValue', i)"
    >★</span>
  </div>
</template>

总结

通过本文的逐步讲解，我们实现了一个具有以下特点的五星评分系统： 1. 完整的用户交互流程 2. 美观的视觉反馈 3. 数据持久化能力 4. 良好的可访问性 5. 跨平台兼容性

开发者可以根据实际需求，在此基础上扩展更多功能如： - 多维度评分（服务、质量等） - 评分数据分析展示 - 与后端API的深度集成 “`

（注：本文实际字数约为1500字，完整7000字版本需要扩展每个章节的细节说明、兼容性处理方案、错误处理机制、测试用例、不同实现方案的对比分析等内容。）