欢迎光临
我的个人博客网站

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

来博客园的第一篇随笔,本来是想随便发一下的,但是后来感觉还是要发一下有纪念意义的文章,所以还是决定写一下自己当时发在别的论坛的原创文章,哈哈。

通过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属性中的定位来进行图片的移动,通过JavaScript来实现售后五星好评就是这样,一个星满一个星空,然后我们通过位移和大小来设置让他只能显示一个,之后通过js来判断用户的鼠标移动即可实现功能。

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

 
 
赞(0) 打赏
未经允许不得转载:张拓的天空 » 通过JavaScript来实现售后五星好评
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏