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

<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(/uploads/allimg/201128/162FC047-0.png) no-repeat;/* cursor: pointer; \*/
/* vertical-align: -2px; */
/\*span为行内元素,不能直接设置宽高,转换成block\*/
}
span.star-off {
background-position: -40px 0;
}

<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,通过这个来改变文字效果,再接着也就是增加别的效果了,比如说评分后想要改变之类的,我们先清空一下属性,然后直接添加新的属性就行了,因为毕竟计算器的运算远非人能相比的,所以虽然看着代码是这个先那个后,但是人眼根本分辨不出来的,然后基本上大部分的功能就实现了。
其实也就是涉及了一个叫做循环的问题,哈哈,其实有点忘了这一段了,刚才去巩固了一下。
其实就是因为你点亮星星的话应该是从头开始的,而我们如果不加循环的话那么它只会点亮我们移动到的星星,而之前的不会管。我们添加了for循环的话,就可以了。

至于说为什么不点亮多的星星,是因为我们在前面有一个传参的地方,设置了我们在哪里移动就获取哪里的数值,然后就会把得到的参数传递下去,这样的话前面的星星也就会点亮了。
如果有什么不懂的,可以在评论区留言,我会在看到的时候进行回复的。

本文作者:博主:     文章标题:通过JavaScript来实现售后五星好评
本文地址:https://zjzdmc.top/jsfx/65.html     
版权说明:若无注明,本文皆为“Datehoer的Blog-个人博客-技术分享”原创,转载请保留文章出处。
最后修改:2021 年 04 月 20 日 09 : 07 AM
如果觉得我的文章对你有用,请随意赞赏