一、實現(xiàn)原理：
1、要設(shè)置一個“大總管變量”，用于記錄點擊時的星星下標，只聲明不賦值。
2、移入每個星星時，先把所有的星星恢復(fù)到默認狀態(tài)；再把當前星星及在它之前的星星設(shè)為選中狀態(tài)。
3、移出每個星星時，先把所有的星星恢復(fù)到默認狀態(tài)；再把大總管變量里記錄的星星及在它之前的星星設(shè)為選中狀態(tài)。
4、點擊星星時，把當前星星的下標賦值給大總管變量；再把當前星星及在它之前的星星設(shè)為選中狀態(tài)。
二、代碼展示：
<!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(http://files.cnblogs.com/files/susufufu/star0.gif) no-repeat;}
li.on{background: url(http://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(){
//鼠標進入時，先把所有的星星恢復(fù)到默認狀態(tài)
for(var j=0;j<lislength;j++){
lis[j].className = '';
}
// 把當前星星以及它前面的星星設(shè)為選中狀態(tài)
for(var j=0;j<=this.index;j++){
lis[j].className = 'on';
}
};
lis[i].onmouseout = function(){
//鼠標離開時，先把所有的星星恢復(fù)到默認狀態(tài)
for(var j=0;j<lislength;j++){
lis[j].className = '';
}
// 把點擊過的星星及它前面的星星設(shè)為選中狀態(tài)
for(var j=0;j<=num;j++){
lis[j].className = 'on';
}
};
lis[i].onclick = function(){
//點擊時，把當前的星星下標賦值給大總管變量，再把它前面的星星設(shè)為選中狀態(tài)
num = this.index;
for(var j=0;j<=this.index;j++){
lis[j].className = 'on';
}
}
}
}
</script>
</body>
</html>
