- A+
所属分类：Web前端
来博客园的第一篇随笔，本来是想随便发一下的，但是后来感觉还是要发一下有纪念意义的文章，所以还是决定写一下自己当时发在别的论坛的原创文章，哈哈。
通过JavaScript来实现五星好评。
这个功能相信各位都不陌生，不论是淘宝还是京东，亦或者是各类微商，都离不开好评这个东西，好评多了，平台对你的关照也就多了起来。
这个由于是好早以前写的代码了，效果图就不放了，我把所有需要本地的东西都用在线的方式替代了，比如说图片就用图床给替代了，别的也没啥需要替代的了。
话不多说，直接上一下代码，然后我们简单的解析一下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> 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; } </style> </head> <body> <!-- 图片精灵技术----网站上有许多的icon图片，比如说打评分等等，如果每个都单独做的话，每次请求都会对服务器造成很大的压力，所以就把所有的 图标做在一起了 --> <div class="body"> <div> <span style="width: 150px;">请选择您的评价:</span> <span class="star star-off"></span> <span class="star star-off"></span> <span class="star star-off"></span> <span class="star star-off"></span> <span class="star star-off"></span> <span id="pingjia"></span> </div> </div> <script> //获取对象 // 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"; }} } </script> </body> </html>
其实思路非常简单，就是通过css属性中的定位来进行图片的移动，
就是这样，一个星满一个星空，然后我们通过位移和大小来设置让他只能显示一个，之后通过js来判断用户的鼠标移动即可实现功能。
首先呢，先让所有的星星隐藏起来，也就是让他们显示的位置移到右面，显示空星，之后通过js中的onmouseover来判断鼠标的移动，根据移动的位置来实现评分的改变，也就是那个innerHtml，通过这个来改变文字效果，再接着也就是增加别的效果了，比如说评分后想要改变之类的，我们先清空一下属性，然后直接添加新的属性就行了，因为毕竟计算器的运算远非人能相比的，所以虽然看着代码是这个先那个后，但是人眼根本分辨不出来的，然后基本上大部分的功能就实现了。
