通过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循环的话，就可以了。

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

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