通过JavaScript来实现售后五星好评

实现思路

发一篇js代码吧，毕竟说到底我还是要搞前端的，哈哈。通过JavaScript来实现五星好评功能。这个功能相信各位都不陌生，不论是淘宝还是京东，亦或者是各类微商，都离不开好评这个东西，好评多了，平台对你的关照也就多了起来。而且一般来说这个都是用在售后，外卖网购等等吧，都很需要他的，然后呢，我百度搜索到的许多代码其实都有些冗长了，当然也可能是我没有仔细看，不过大体一看就觉得没我的好，所以才准备发这篇文章，不过其实这个是我好久以前写的了。效果图就不放了，我把所有需要本地的东西都用在线的方式替代了，比如说图片就用图床给替代了，别的也没啥需要替代的了。话不多说，直接上一下代码，然后我们简单的解析一下。

代码示例

Document  html, body, a, h1, h2, h3, h4, h5, h6, p, a, b, i, em, ul, ol, li, strong, table, th, tr, td, img, form, input, button, select, option, textarea { margin: 0; padding: 0; }

.body {
  text-align: center;
  margin: 10px auto;
  width: 800px;
  height: 64px;
  background-color: aqua;
}

span {
  display: inline-block;
  width: 40px;
  height: 40px;
  /* border: 1px solid red; */
}

span.star {
  background: url(https://s3.ax1x.com/2020/11/21/Dl492V.png) no-repeat;
  /* cursor: pointer; */
  /* vertical-align: -2px; */
  /* span为行内元素，不能直接设置宽高，转换成block */
}

span.star-off {
  background-position: -40px 0;
}

请选择您的评价:

//获取对象
// var div = document.querySelector("div");
// console.log(div);
// var span = document.querySelectorAll(".star")
// console.log(span);
var star = document.getElementsByClassName("star");
var pingjia = document.querySelector("#pingjia");
var pingjias = ["很差", "较差", "一般", "良好", "很好"];
var len = star.length;
onoff = true; //开关，判断是否点击，点击后不执行移入移出事件
for (var i = 0; i < len; i++) {
  //绑定鼠标移入 移出 点击
  star[i].index = i;
  star[i].onmouseover = function () {
    if (onoff) {
      var num = this.index;
      pingjia.innerHTML = pingjias[num];
      for (var i = 0; i <= num; i++) {
        star[i].style.backgroundPosition = "0 0";
      }
    }
  }
  star[i].onmouseout = function () {
    if (onoff) {
      var num = this.index;
      pingjia.innerHTML = "";
      for (var i = 0; i <= num; i++) {
        star[i].style.backgroundPosition = "-40px 0";
      }
    }
  }
  star[i].onclick = function () {
    onoff = false;
    pingjia.innerHTML = "";
    for (var j = 0; j < len; j++) {
      star[j].style.backgroundPosition = "-40px 0";
    }
    var num = this.index;
    pingjia.innerHTML = pingjias[num];
    for (var i = 0; i <= num; i++) {
      star[i].style.backgroundPosition = "0 0";
    }
  }
}

其实思路非常简单，就是通过css属性中的定位来进行图片的移动，一个星满一个星空，然后我们通过位移和大小来设置让他只能显示一个，之后通过js来判断用户的鼠标移动即可实现功能。

首先呢，先让所有的星星隐藏起来，也就是让他们显示的位置移到右面，显示空星，之后通过js中的onmouseover来判断鼠标的移动，根据移动的位置来实现评分的改变，也就是那个innerHtml，通过这个来改变文字效果，再接着也就是增加别的效果了，比如说评分后想要改变之类的，我们先清空一下属性，然后直接添加新的属性就行了，因为毕竟计算器的运算远非人能相比的，所以虽然看着代码是这个先那个后，但是人眼根本分辨不出来的，然后基本上大部分的功能就实现了。

其实也就是涉及了一个叫做循环的问题，哈哈，其实有点忘了这一段了，刚才去巩固了一下。

其实就是因为你点亮星星的话应该是从头开始的，而我们如果不加循环的话那么它只会点亮我们移动到的星星，而之前的不会管。我们添加了for循环的话，就可以了。

至于为什么不点亮多的星星，是因为我们在前面有一个传参的地方，设置了我们在哪里移动就获取哪里的数值，然后就会把得到的参数传递下去，这样的话前面的星星也就会点亮了。

如果有什么不懂的，可以在评论区留言，我会在看到的时候进行回复的。