淘宝五星评价效果js

淘宝五星评价效果通常指的是在电商平台上，用户对购买的商品或服务进行评价时，采用五星评分系统，并通过JavaScript（JS）实现动态交互效果。以下是对该问题的详细解答：

基础概念

五星评价系统：一种常见的用户评价方式，用户通过点击星星图标来选择满意度评分，通常从一星到五星代表不同的满意度等级。

JavaScript（JS）：一种广泛用于网页开发的脚本语言，可以实现网页与用户之间的交互效果。

类型与应用场景

类型：

静态五星评价：仅展示星星图标，用户点击后显示评分结果。
动态五星评价：通过JS实现星星的逐一点亮或熄灭效果，提供更丰富的交互体验。

应用场景：

电商平台商品详情页：展示买家对商品的评分。
服务评价系统：如餐饮、酒店等行业，用于收集客户反馈。
论坛或社区：用户对帖子或回答进行评分。

实现示例与代码

以下是一个简单的动态五星评价效果的JavaScript实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五星评价示例</title>
<style>
  .star {
    cursor: pointer;
    font-size: 2em;
    color: grey;
  }
  .active {
    color: gold;
  }
</style>
</head>
<body>

<div id="rating">
  <span class="star" data-value="1">&#9733;</span>
  <span class="star" data-value="2">&#9733;</span>
  <span class="star" data-value="3">&#9733;</span>
  <span class="star" data-value="4">&#9733;</span>
  <span class="star" data-value="5">&#9733;</span>
</div>

<script>
  const stars = document.querySelectorAll('.star');
  stars.forEach(star => {
    star.addEventListener('click', function() {
      const value = this.getAttribute('data-value');
      highlightStars(value);
    });
    star.addEventListener('mouseover', function() {
      const value = this.getAttribute('data-value');
      previewStars(value);
    });
    star.addEventListener('mouseout', resetStars);
  });

  function highlightStars(value) {
    stars.forEach((star, index) => {
      if (index < value) {
        star.classList.add('active');
      } else {
        star.classList.remove('active');
      }
    });
  }

  function previewStars(value) {
    stars.forEach((star, index) => {
      if (index < value) {
        star.classList.add('active');
      }
    });
  }

  function resetStars() {
    stars.forEach(star => star.classList.remove('active'));
  }
</script>

</body>
</html>