js星星评分效果示例 一个页面多个星星评分

如何实现一个页面多个评分效果？
js星星评分的代码，如何评多次分呢？

js实现星星评分，效果图如下：

1，css代码

#ratestatus{float:left; clear:both; width:100%; height:20px;}  
    #rateme{ clear:both; width:100%;  padding:0px; margin:0px;}  
    #rateme li{float:left;list-style:none;}  
    #rateme li a:hover,  
    #rateme .on{background:url(star_on.gif) no-repeat;width:12px;height:12px;}  
    #rateme a{float:left;background:url(star_off.gif) no-repeat;width:12px; height:12px;}  
    #ratingsaved{display:none;}  
    .saved{color:red; }  

2，html代码

<span id="ratestatus">评分...</span>  
<span id="ratingsaved">评分结果!</span>   
<div id="rateme" title="评分...">  
    <a onclick="rateit(1,this)" id="1_1" title="较差" onmouseover="rating(1,this)" onmouseout="off(1,this)"></a>  
    <a onclick="rateit(1,this)" id="1_2" title="还可以" onmouseover="rating(1,this)" onmouseout="off(1,this)"></a>  
    <a onclick="rateit(1,this)" id="1_3" title="好" onmouseover="rating(1,this)" onmouseout="off(1,this)"></a>  
     <a onclick="rateit(1,this)" id="1_4" title="相当好" onmouseover="rating(1,this)" onmouseout="off(1,this)"></a>  
      <a onclick="rateit(1,this)" id="1_5" title="好极了" onmouseover="rating(1,this)" onmouseout="off(1,this)"></a>  
</div>  
  
<div id="rateme" title="评分...">  
    <a onclick="rateit(2,this)" id="2_1" title="较差" onmouseover="rating(2,this)" onmouseout="off(2,this)"></a>  
    <a onclick="rateit(2,this)" id="2_2" title="还可以" onmouseover="rating(2,this)" onmouseout="off(2,this)"></a>  
    <a onclick="rateit(2,this)" id="2_3" title="好" onmouseover="rating(2,this)" onmouseout="off(2,this)"></a>  
     <a onclick="rateit(2,this)" id="2_4" title="相当好" onmouseover="rating(2,this)" onmouseout="off(2,this)"></a>  
      <a onclick="rateit(2,this)" id="2_5" title="好极了" onmouseover="rating(2,this)" onmouseout="off(2,this)"></a>  
</div>  

3，js星星评分代码：

var smax;   // 最大数量的星星即最大评分值  
var holder; // 鼠标停留的评分控件  
var preset; // 保存了评分值（通过单击来进行评分）  
var rated=new array(); //是否评分过，并保存了结果（注意此值一旦设为空，就不能再评分）  
  
// 鼠标停留事件  
function rating(idpre,num){  
    smax = 0;   // 默认值为0  
    for(n=0; n<num.parentnode.childnodes.length; n++){  
        if(num.parentnode.childnodes[n].nodename == "a"){  
            smax++;   
        }  
    }  
      
    if(!rated[idpre]){  
        s = num.id.replace(idpre+'_', ''); // 获取选中的星星的索引，这里使用_1,_2,_3,_4,_5来做为评分控件的id，当然也有其他的方式。  
        a = 0;  
        for(i=1; i<=smax; i++){        
            if(i<=s){  
                document.getelementbyid(idpre+"_"+i).classname = "on";  
                document.getelementbyid("ratestatus").innerhtml = num.title;      
                holder = a+1;  
                a++;  
            }else{  
                document.getelementbyid(idpre+"_"+i).classname = "";  
            }  
        }  
    }  
}  
  
// 离开事件  
function off(idpre,me){  
    if(!rated[idpre]){  
        if(!preset){      
            for(i=1; i<=smax; i++){        
                document.getelementbyid(idpre+"_"+i).classname = "";  
                document.getelementbyid("ratestatus").innerhtml = me.parentnode.title;  
            }  
        }else{  
            rating(idpre,preset);  
            //document.getelementbyid("ratestatus").innerhtml = document.getelementbyid("ratingsaved").innerhtml;  
        }  
    }  
}  
  
// 点击进行评分  
function rateit(idpre,me){  
    if(!rated[idpre]){  
        document.getelementbyid("ratestatus").innerhtml = me.title;//document.getelementbyid("ratingsaved").innerhtml + " :: "+  
        preset = me;  
        //rated=1;  //设为1以后，就变成了最终结果，不能再修改评分结果  
        rated[idpre]=1;  
        sendrate(me);  
        rating(idpre,me);  
    }  
}  
  
//使用ajax或其他方式发送评分结果   
function sendrate(sel){  
    //alert("评分结果: "+sel.title);  
}  

源码打包下载：下载地址