js星星评分效果

 一个页面多个评分效果

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

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

#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; }

 

 以下是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>

 

以下是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);
}

 

 实现的效果图如下：

 

 

 

 

 

 

接下来把代码打包上传