一、实现原理：
1、要设置一个“大总管变量”，用于记录点击时的星星下标，只声明不赋值。
2、移入每个星星时，先把所有的星星恢复到默认状态；再把当前星星及在它之前的星星设为选中状态。
3、移出每个星星时，先把所有的星星恢复到默认状态；再把大总管变量里记录的星星及在它之前的星星设为选中状态。
4、点击星星时，把当前星星的下标赋值给大总管变量；再把当前星星及在它之前的星星设为选中状态。
二、代码展示：
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> ul,li{ list-style: none; } li{display:block;float: left; width: 21px; height: 21px;background: url(https://files.cnblogs.com/files/susufufu/star0.gif) no-repeat;} li.on{background: url(https://files.cnblogs.com/files/susufufu/star1.gif) no-repeat;} </style> </head> <body> <ul id="box"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <script type="text/javascript"> window.onload = function(){ var lis = document.getElementsByTagName('li'); var lislength = lis.length; //大总管变量 var num; for (var i = 0; i < lislength; i++) { //给每一个li加下标 lis[i].index = i; lis[i].onmouseover = function(){ //鼠标进入时，先把所有的星星恢复到默认状态 for(var j=0;j<lislength;j++){ lis[j].className = ''; } // 把当前星星以及它前面的星星设为选中状态 for(var j=0;j<=this.index;j++){ lis[j].className = 'on'; } }; lis[i].onmouseout = function(){ //鼠标离开时，先把所有的星星恢复到默认状态 for(var j=0;j<lislength;j++){ lis[j].className = ''; } // 把点击过的星星及它前面的星星设为选中状态 for(var j=0;j<=num;j++){ lis[j].className = 'on'; } }; lis[i].onclick = function(){ //点击时，把当前的星星下标赋值给大总管变量，再把它前面的星星设为选中状态 num = this.index; for(var j=0;j<=this.index;j++){ lis[j].className = 'on'; } } } } </script> </body> </html>