js实现星星评分

 一个页面多个评分效果

js星星评分的代码在网上一搜就是一堆，可大部分是一个页面只能有一个，刚碰到一个需求，一个页面需要评多次的，所以自己在网上找了然后总结了下分享给大家。

以下是需要用到的样式代码

Css代码  

1. <span style="font-size: small;">#rateStatus{float:left; clear:both; width:100%; height:20px;}  
2.     #rateMe{ clear:both; width:100%;  padding:0px; margin:0px;}  
3.     #rateMe li{float:left;list-style:none;}  
4.     #rateMe li a:hover,  
5.     #rateMe .on{background:url(star_on.gif) no-repeat;width:12px;height:12px;}  
6.     #rateMe a{float:left;background:url(star_off.gif) no-repeat;width:12px; height:12px;}  
7.     #ratingSaved{display:none;}  
8.     .saved{color:red; }</span>  

 

 以下是HTML代码

 

Html代码  

1. <span id="rateStatus">评分...</span>  
2. <span id="ratingSaved">评分结果!</span>   
3. <div id="rateMe" title="评分...">  
4.     <a onclick="rateIt(1,this)" id="1_1" title="较差" onmouseover="rating(1,this)" onmouseout="off(1,this)"></a>  
5.     <a onclick="rateIt(1,this)" id="1_2" title="还可以" onmouseover="rating(1,this)" onmouseout="off(1,this)"></a>  
6.     <a onclick="rateIt(1,this)" id="1_3" title="好" onmouseover="rating(1,this)" onmouseout="off(1,this)"></a>  
7.      <a onclick="rateIt(1,this)" id="1_4" title="相当好" onmouseover="rating(1,this)" onmouseout="off(1,this)"></a>  
8.       <a onclick="rateIt(1,this)" id="1_5" title="好极了" onmouseover="rating(1,this)" onmouseout="off(1,this)"></a>  
9. </div>  
10.   
11. <div id="rateMe" title="评分...">  
12.     <a onclick="rateIt(2,this)" id="2_1" title="较差" onmouseover="rating(2,this)" onmouseout="off(2,this)"></a>  
13.     <a onclick="rateIt(2,this)" id="2_2" title="还可以" onmouseover="rating(2,this)" onmouseout="off(2,this)"></a>  
14.     <a onclick="rateIt(2,this)" id="2_3" title="好" onmouseover="rating(2,this)" onmouseout="off(2,this)"></a>  
15.      <a onclick="rateIt(2,this)" id="2_4" title="相当好" onmouseover="rating(2,this)" onmouseout="off(2,this)"></a>  
16.       <a onclick="rateIt(2,this)" id="2_5" title="好极了" onmouseover="rating(2,this)" onmouseout="off(2,this)"></a>  
17. </div>  

 

以下是js代码：

 

Js代码  

1. var sMax;   // 最大数量的星星即最大评分值  
2. var holder; // 鼠标停留的评分控件  
3. var preSet; // 保存了评分值（通过单击来进行评分）  
4. var rated=new Array(); //是否评分过，并保存了结果（注意此值一旦设为空，就不能再评分）  
5.   
6. // 鼠标停留事件  
7. function rating(idPre,num){  
8.     sMax = 0;   // 默认值为0  
9.     for(n=0; n<num.parentNode.childNodes.length; n++){  
10.         if(num.parentNode.childNodes[n].nodeName == "A"){  
11.             sMax++;   
12.         }  
13.     }  
14.       
15.     if(!rated[idPre]){  
16.           
17.         s = num.id.replace(idPre+'_', ''); // 获取选中的星星的索引，这里使用_1,_2,_3,_4,_5来做为评分控件的ID，当然也有其他的方式。  
18.         a = 0;  
19.         for(i=1; i<=sMax; i++){        
20.             if(i<=s){  
21.                   
22.                 document.getElementById(idPre+"_"+i).className = "on";  
23.                 document.getElementById("rateStatus").innerHTML = num.title;      
24.                 holder = a+1;  
25.                 a++;  
26.             }else{  
27.                   
28.                 document.getElementById(idPre+"_"+i).className = "";  
29.             }  
30.         }  
31.     }  
32. }  
33.   
34. // 离开事件  
35. function off(idPre,me){  
36.     if(!rated[idPre]){  
37.         if(!preSet){      
38.             for(i=1; i<=sMax; i++){        
39.                 document.getElementById(idPre+"_"+i).className = "";  
40.                 document.getElementById("rateStatus").innerHTML = me.parentNode.title;  
41.             }  
42.         }else{  
43.             rating(idPre,preSet);  
44.             //document.getElementById("rateStatus").innerHTML = document.getElementById("ratingSaved").innerHTML;  
45.         }  
46.     }  
47. }  
48.   
49. // 点击进行评分  
50. function rateIt(idPre,me){  
51.     if(!rated[idPre]){  
52.         document.getElementById("rateStatus").innerHTML = me.title;//document.getElementById("ratingSaved").innerHTML + " :: "+  
53.         preSet = me;  
54.         //rated=1;  //设为1以后，就变成了最终结果，不能再修改评分结果  
55.         rated[idPre]=1;  
56.         sendRate(me);  
57.         rating(idPre,me);  
58.     }  
59. }  
60.   
61. //使用Ajax或其他方式发送评分结果   
62. function sendRate(sel){  
63.     //alert("评分结果: "+sel.title);  
64. }  

 

实现的效果图如下：