Javascript 实现简单的星级评分功能

Posted blue-guapi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript 实现简单的星级评分功能相关的知识,希望对你有一定的参考价值。

  使用 javascript 实现简单的星级评分功能,思路很简单,封装一个能进行重复调用函数:

  当鼠标移入后,遍历评分div里的子div,然后前两个子div改变背景为灰色,后面全部为橙色,然后改变对应的评分内容;

  当鼠标移出后,使用for循环把子div背景颜色和评分内容恢复初始化状态;

  当鼠标点击时,依旧前两个子div改变背景为灰色,后面全部为橙色,然后改变对应的评分内容,并且记录当前点击的是第几个子div,方便在鼠标移入移出后,依旧能固定当前点击的子div背景颜色和评分内容;如果后期页面又需要增添多一个新的评分功能,只需要再定义一个评分数组来使用即可,然后传入对应的数组来进行使用,效果如下:

技术分享图片

代码如下:

 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>javascript实现简单的星级评分功能</title>
  6     <style>
  7         .content, .content1 {
  8             margin-top: 20px;
  9             padding-top: 20px;
 10             border-top: 1px solid #000;
 11         }
 12         .red {
 13             color: red;
 14         }
 15         .total-star {
 16             font-size: 20px;
 17             color: #333;
 18             font-weight: 700;
 19         }
 20         .star {
 21             width: 20px;
 22             height: 20px;
 23             border-radius: 50%;
 24             background-color: #ccc;
 25             display: inline-block;
 26             margin-right: 5px;
 27             cursor: pointer;
 28         }
 29         .stars {
 30             color: orange;
 31             margin-left: 10px;
 32         }
 33     </style>
 34 </head>
 35 <body>
 36     <div class="content">
 37         <span class="red">*</span>
 38         <span class="total-star">总体评价:</span>
 39         <div class="star"></div>
 40         <div class="star"></div>
 41         <div class="star"></div>
 42         <div class="star"></div>
 43         <div class="star"></div>
 44         <span class="stars">评分</span>
 45     </div>
 46     <div class="content1">
 47         <span class="red">*</span>
 48         <span class="total-star">内容丰富度:</span>
 49         <div class="star"></div>
 50         <div class="star"></div>
 51         <div class="star"></div>
 52         <div class="star"></div>
 53         <div class="star"></div>
 54         <span class="stars">评分</span>
 55     </div>
 56 
 57 <script>
 58     window.onload=function(){
 59         var oCont = document.getElementsByClassName(content)[0];
 60         var oCont1 = document.getElementsByClassName(content1)[0];
 61         var aText1=[,较差,,推荐,力荐];
 62         var aText2=[,较少,一般,,很多];
 63 
 64         //调用函数
 65         Stars(oCont,aText1);
 66         Stars(oCont1,aText2);
 67 
 68         function Stars(id,Txt){
 69             var index=‘‘;//使用这个index来记录星星被点击后的等级
 70             //获取元素
 71             var aStar = id.getElementsByClassName(star);
 72             var oStars = id.getElementsByClassName(stars)[0];
 73 
 74             //让全部星星变灰
 75             function gray(){
 76                 for(var v=0;v<aStar.length;v++){
 77                     aStar[v].style.backgroundColor = #ccc;
 78                 }
 79             }
 80 
 81             for(let i=0;i<aStar.length;i++){
 82 
 83                 //设置星星颜色
 84                 function starColor(){
 85                     // 前两个星星显示灰色
 86                     if(i<=1){
 87                         gray();
 88                         for(let t=0;t<=i;t++){
 89                             aStar[t].style.backgroundColor = #999;
 90                         }
 91                     }else{
 92                         //后面星星都显示橙色
 93                         gray();
 94                         for(let j=0;j<=i;j++){
 95                             aStar[j].style.backgroundColor = orange;
 96                         }
 97                     }
 98                 }
 99 
100                 //鼠标移入变换星星颜色
101                 aStar[i].onmouseover=function(){
102                     oStars.innerHTML = Txt[i];
103                     starColor();
104                     //鼠标移出变灰,评论等级清空
105                     this.onmouseout=function(){
106                         gray();
107                         oStars.innerHTML = 评分;
108                         //这里必须为 === ,否则当index==0时,会进行隐式类型转换,变成 (index==‘‘) ==> (0==‘‘)  ==> (false==false),直接return出去
109                         if(index===‘‘){
110                             return;
111                         }else if(index<=1){//通过index重新设置后面鼠标移开后的星星等级
112                             for(var n=0;n<=index;n++){
113                                 aStar[n].style.backgroundColor = #999;
114                             }
115                             oStars.innerHTML = Txt[index];
116                         }else{
117                             for(var m=0;m<=index;m++){//通过index重新设置后面鼠标移开后的星星等级
118                                 aStar[m].style.backgroundColor = orange;
119                             }
120                             oStars.innerHTML = Txt[index];
121                         }
122                     }
123                 }
124 
125                 //鼠标点击固定星星等级和评论等级
126                 aStar[i].onclick=function(){
127                     // 关闭移出操作
128                     this.onmouseout=null;
129                     //星星等级
130                     oStars.innerHTML = Txt[i];
131                     if(i<=1){
132                         for(let t=0;t<=i;t++){
133                             aStar[t].style.backgroundColor = #999;
134                             //获取当前点击的是多少等级的星星,让后面鼠标移开后可以重新设置星星等级
135                             index=t;
136                         }
137                     }else{
138                         for(let j=0;j<=i;j++){
139                             aStar[j].style.backgroundColor = orange;
140                             //获取当前点击的是多少等级的星星,让后面鼠标移开后可以重新设置星星等级
141                             index=j;
142                         }
143                     }
144                 }
145             }
146         }
147     }
148 </script>
149 </body>
150 </html>

 

以上是关于Javascript 实现简单的星级评分功能的主要内容,如果未能解决你的问题,请参考以下文章

Django 星级评分系统 AJAX 和 JavaScript

星级评分系统 - 悬停+点击问题

星级评价(简单版)

星级评分实现

慕课网上的星级评分--学习视频后模仿实现

原生js实现星级评分