原生js多组星级评价
所需图片：
html
<div class="starLevel"> <ul class="stars"> <li class="light star1"><a href="javascript:;">1</a></li> <li class="star1"><a href="javascript:;">2</a></li> <li class="star1"><a href="javascript:;">3</a></li> <li class="star1"><a href="javascript:;">4</a></li> <li class="star1"><a href="javascript:;">5</a></li> </ul> <ul class="stars"> <li class="light star2"><a href="javascript:;">1</a></li> <li class="star2"><a href="javascript:;">2</a></li> <li class="star2"><a href="javascript:;">3</a></li> <li class="star2"><a href="javascript:;">4</a></li> <li class="star2"><a href="javascript:;">5</a></li> </ul> <ul class="stars"> <li class="light star3"><a href="javascript:;">1</a></li> <li class="star3"><a href="javascript:;">2</a></li> <li class="star3"><a href="javascript:;">3</a></li> <li class="star3"><a href="javascript:;">4</a></li> <li class="star3"><a href="javascript:;">5</a></li> </ul> </div>js
（遗留问题：无法用一个函数实现三组评分）
//打星星 var num1 =finalNum1 = tempNum1= 0; var lis1 = document.getElementsByClassName("star1"); //num:传入点亮星星的个数 //finalNum:最终点亮星星的个数 //tempNum:一个中间值 function fnShow(num1) { finalNum1 = num1 || tempNum1;//如果传入的num为0，则finalNum取tempNum的值 for (var i = 0; i < lis1.length; i++) { if(i < finalNum1){ lis1[i].className += " light "; } else{ lis1[i].className = "star1"; }//点亮星星就是加class为light的样式 } } for (var i = 1; i <= lis1.length; i++) { lis1[i - 1].index = i; lis1[i - 1].onmouseover = function() { //鼠标经过点亮星星。 fnShow(this.index);//传入的值为正，就是finalNum } lis1[i - 1].onmouseout = function() { //鼠标离开时星星变暗 fnShow(0);//传入值为0，finalNum为tempNum,初始为0 } lis1[i - 1].onclick = function() { //鼠标点击,同时会调用onmouseout,改变tempnum值点亮星星 tempNum1= this.index; } } var num2 =finalNum2 = tempNum2= 0; var lis2 = document.getElementsByClassName("star2"); //num:传入点亮星星的个数 //finalNum:最终点亮星星的个数 //tempNum:一个中间值 function fnShow2(num2) { finalNum2 = num2 || tempNum2;//如果传入的num为0，则finalNum取tempNum的值 for (var i = 0; i < lis2.length; i++) { if(i < finalNum2){ lis2[i].className += " light "; } else{ lis2[i].className = "star2"; }//点亮星星就是加class为light的样式 } } for (var i = 1; i <= lis2.length; i++) { lis2[i - 1].index = i; lis2[i - 1].onmouseover = function() { //鼠标经过点亮星星。 fnShow2(this.index);//传入的值为正，就是finalNum } lis2[i - 1].onmouseout = function() { //鼠标离开时星星变暗 fnShow2(0);//传入值为0，finalNum为tempNum,初始为0 } lis2[i - 1].onclick = function() { //鼠标点击,同时会调用onmouseout,改变tempnum值点亮星星 tempNum2= this.index; } } var num3 =finalNum3 = tempNum3= 0; var lis3 = document.getElementsByClassName("star3"); //num:传入点亮星星的个数 //finalNum:最终点亮星星的个数 //tempNum:一个中间值 function fnShow3(num3) { finalNum3 = num3 || tempNum3;//如果传入的num为0，则finalNum取tempNum的值 for (var i = 0; i < lis3.length; i++) { if(i < finalNum3){ lis3[i].className += " light "; } else{ lis3[i].className = "star3"; }//点亮星星就是加class为light的样式 } } for (var i = 1; i <= lis3.length; i++) { lis3[i - 1].index = i; lis3[i - 1].onmouseover = function() { //鼠标经过点亮星星。 fnShow3(this.index);//传入的值为正，就是finalNum } lis3[i - 1].onmouseout = function() { //鼠标离开时星星变暗 fnShow3(0);//传入值为0，finalNum为tempNum,初始为0 } lis3[i - 1].onclick = function() { //鼠标点击,同时会调用onmouseout,改变tempnum值点亮星星 tempNum3= this.index; } } }