JS实现五星好评效果

实现五星好评效果主要分两个步骤，分别是HTML结构布局和JavaScript脚本编写。

HTML结构布局

首先，需要在页面中创建五个星星图标，可以使用<i>标签，设置样式为fa fa-star，并将五个星星元素放置在指定的容器内，如下所示：

<div class="star-rating">
  <i id="star1" class="fa fa-star"></i>
  <i id="star2" class="fa fa-star"></i>
  <i id="star3" class="fa fa-star"></i>
  <i id="star4" class="fa fa-star"></i>
  <i id="star5" class="fa fa-star"></i>
</div>

其中，id属性为每个星星元素设置唯一的ID值，方便后续进行操作。

JavaScript脚本编写

接下来，需要编写JavaScript脚本实现星星的高亮和评分功能。具体实现方式如下：

实现星星高亮

给每个星星元素绑定鼠标移入事件，使用addEventListener方法实现，监听mouseover事件。
在事件处理函数中，使用循环遍历所有星星元素，将当前鼠标所在星星及其左边的所有星星元素设置为高亮状态。设置方法可以通过添加fa-star样式，或者className属性来实现。
给每个星星元素绑定鼠标移出事件，同样使用addEventListener方法实现，监听mouseout事件。
在移出事件处理函数中，将所有星星元素的样式设置为默认状态，取消高亮状态。

示例代码如下：

let stars = document.querySelectorAll('.star-rating i');

// 绑定鼠标移入事件
stars.forEach((star, index) => {
  star.addEventListener('mouseover', () => {
    for (let i = 0; i <= index; i++) {
      stars[i].classList.add('fa-star');
      stars[i].classList.remove('fa-star-o');
    }
  });

  // 绑定鼠标移出事件
  star.addEventListener('mouseout', () => {
    for (let i = 0; i < stars.length; i++) {
      stars[i].classList.add('fa-star-o');
      stars[i].classList.remove('fa-star');
    }
  });
});

实现评分功能

给每个星星元素绑定点击事件，同样使用addEventListener方法实现，监听click事件。
在事件处理函数中，将当前鼠标所在星星及其左边的所有星星元素设置为高亮状态。设置方法可以通过添加fa-star样式，或者className属性来实现。
根据评分等级的不同，可以触发相应的后续业务逻辑，如保存评分、显示评分结果等。

示例代码如下：

stars.forEach((star, index) => {
  star.addEventListener('click', () => {
    for (let i = 0; i <= index; i++) {
      stars[i].classList.add('fa-star');
      stars[i].classList.remove('fa-star-o');
    }
    // 假设评分等级 ranges from 1 to 5
    let rating = index + 1;
    console.log(`You rated ${rating} stars.`);
  });
});

示例说明

下面给出两个示例，分别演示如何在不同的业务场景下使用上述实现方案。

示例1：商家评分功能

在一个电商平台的商品详情页面中，用户可以对该商品的商家进行评分。实现如下：

<div class="seller-rating">
  <h3>商家评分</h3>
  <div class="star-rating">
    <i id="star1" class="fa fa-star-o"></i>
    <i id="star2" class="fa fa-star-o"></i>
    <i id="star3" class="fa fa-star-o"></i>
    <i id="star4" class="fa fa-star-o"></i>
    <i id="star5" class="fa fa-star-o"></i>
  </div>
</div>

<script>
 // 插入上述 JavaScript 代码进行绑定
</script>

在商品详情页面中，插入以上HTML代码和JavaScript代码。当用户对商家进行评分时，页面上的星星图片会自动变为黄色，按照用户选择的星星数量计算评分等级。可以通过Ajax请求将评分数据保存到后端服务器，以便在后续的数据统计和分析中使用。

示例2：文章评分功能

在一个新闻资讯网站中，用户可以对某篇文章进行评分。实现如下：

<div class="post-rating">
  <h3>文章评分</h3>
  <div class="star-rating">
    <i id="star1" class="fa fa-star-o"></i>
    <i id="star2" class="fa fa-star-o"></i>
    <i id="star3" class="fa fa-star-o"></i>
    <i id="star4" class="fa fa-star-o"></i>
    <i id="star5" class="fa fa-star-o"></i>
  </div>
  <button id="submit-btn" type="button">提交评分</button>
</div>

<script>
 // 插入上述 JavaScript 代码进行绑定
 let submitBtn = document.getElementById('submit-btn');
 submitBtn.addEventListener('click', () => {
   // 判断是否已经评分，未评分则提示用户评分
   let rated = document.querySelector('.star-rating .fa-star');
   if (rated) {
     let rating = rated.id.split('star')[1];
     console.log(`You rated ${rating} stars.`);
     // TODO: 发送评分请求
   } else {
     alert('请先评分后再提交！');
   }
 });
</script>

在文章页面中，展示文章内容和评分表单。用户可以选择评分星级，并且点击提交按钮后可以触发评分保存等后续逻辑。需要注意的是，提交按钮需要添加相应的事件监听函数，以防用户没有进行任何评分操作就进行了文章评价。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现五星好评效果 - Python技术站