评分效果

演示
先看演示：http://www.purewhite.cn/demo/rating/rating.html

对应的 JavaScript 代码
rating.js

代码:

function Rating(name,input){
	this.name = name;
	this.ratingMaxNum = 5;
	this.selectedRating = 0;
	this.onImageSrc = "images/rating/stars_on.gif";
	this.offImageSrc = "images/rating/stars_off.gif";
	document.write('<div id="ratingDiv"></div>');
	document.write('<input name="' +input+ '" type="hidden" id=" '+input+'" value="0" />');
	this.divElement = document.getElementById("ratingDiv");
	this.inputElement = document.getElementById(input);
	this.init();
}

Rating.prototype.init = function(){
	var output = "";
	for(i=1;i<=this.ratingMaxNum;i++){
		output +=  '<img id="rating_'+i+'" name="rating_'+i+'" onClick="'+this.name+'.setRating('+i+');" onMouseOver="'+this.name+'.setOverState('+i+');" onMouseOut="'+this.name+'.setOutState('+i+');" src="'+this.offImageSrc+'" />';
	}
	this.divElement.innerHTML = output;
}

Rating.prototype.setRating = function(id){
	if(this.selectedRating == id){
		this.selectedRating = 0;
	}else{
		this.selectedRating = id;
	}
	this.refreshRating();
	this.inputElement.value = id;
}

Rating.prototype.setOverState = function(id){
	for(i=1;i<=this.ratingMaxNum;i++){
		var imgElement = document.getElementById("rating_"+i);
		if(i<=id){
			imgElement.src = this.onImageSrc;

		}else{
			imgElement.src = this.offImageSrc;
		}
	}
}

Rating.prototype.setOutState = function(){

	this.refreshRating();

}

Rating.prototype.refreshRating = function(){
	for(i=1;i<=this.ratingMaxNum;i++){
		var imgElement = document.getElementById("rating_"+i);
		if(i<=this.selectedRating){
			imgElement.src = this.onImageSrc;
		}else{
			imgElement.src = this.offImageSrc;
		}
	}
}

行间代码，放置于显示区域

代码:

<script language="javascript">
	rt = new Rating("rt","icon");
	rt.setRating(2);
</script>

来源及说明
http://www.klstudio.com/blog/content.cfm?id=192

 

用 AJAX 提交。