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 实现简单的星级评分功能的主要内容，如果未能解决你的问题，请参考以下文章