前端实现关于五星评价功能

准备两张星星的图片，一张有颜色的，一张没有颜色的，下面是相关的代码内容：

<div id="commentLimted_left">
	评价：
	<div id="imgBox">
		<a href="javascript:click(1)"><img src="../image/star.png" id="star1" onMouseOver="over(1)" onMouseOut="out(1)"/></a>
		<a href="javascript:click(2)"><img src="../image/star.png" id="star2" onMouseOver="over(2)" onMouseOut="out(2)"/></a>
		<a href="javascript:click(3)"><img src="../image/star.png" id="star3" onMouseOver="over(3)" onMouseOut="out(3)"/></a>
		<a href="javascript:click(4)"><img src="../image/star.png" id="star4" onMouseOver="over(4)" onMouseOut="out(4)"/></a>
		<a href="javascript:click(5)"><img src="../image/star.png" id="star5" onMouseOver="over(5)" onMouseOut="out(5)"/></a>
	</div>
	<div id="message"></div>  
</div>

//星星评价功能
var check = 0;//该变量是记录当前选择的评分
 
/*over()是鼠标悬停在星星上的效果*/
function over(param){
	if(param == 1){
		$("#star1").attr("src","../image/yellowStar.png");//第一颗星星亮起来
		$("#message").html("1分");//设置提示语，下面以此类推
	}else if(param == 2){
		$("#star1").attr("src","../image/yellowStar.png");
		$("#star2").attr("src","../image/yellowStar.png");
		$("#message").html("2分");
	}else if(param == 3){
		$("#star1").attr("src","../image/yellowStar.png");
		$("#star2").attr("src","../image/yellowStar.png");
		$("#star3").attr("src","../image/yellowStar.png");
		$("#message").html("3分");
	}else if(param == 4){
		$("#star1").attr("src","../image/yellowStar.png");
		$("#star2").attr("src","../image/yellowStar.png");
		$("#star3").attr("src","../image/yellowStar.png");
		$("#star4").attr("src","../image/yellowStar.png");
		$("#message").html("4分");
	}else if(param == 5){
		$("#star1").attr("src","../image/yellowStar.png");
		$("#star2").attr("src","../image/yellowStar.png");
		$("#star3").attr("src","../image/yellowStar.png");
		$("#star4").attr("src","../image/yellowStar.png");
		$("#star5").attr("src","../image/yellowStar.png");
		$("#message").html("5分");
	}
}
/*out 方法是当鼠标移出时，恢复到我的打分情况*/
function out(){
	if(check == 1){//打分是1，设置第一颗星星亮，其他星星暗
		$("#star1").attr("src","../image/yellowStar.png");
		$("#star2").attr("src","../image/star.png");
		$("#star3").attr("src","../image/star.png");
		$("#star4").attr("src","../image/star.png");
		$("#star5").attr("src","../image/star.png");
		$("#message").html("");
	}else if(check == 2){
		$("#star1").attr("src","../image/yellowStar.png");
		$("#star2").attr("src","../image/yellowStar.png");
		$("#star3").attr("src","../image/star.png");
		$("#star4").attr("src","../image/star.png");
		$("#star5").attr("src","../image/star.png");
		$("#message").html("");
	}else if(check == 3){
		$("#star1").attr("src","../image/yellowStar.png");
		$("#star2").attr("src","../image/yellowStar.png");
		$("#star3").attr("src","../image/yellowStar.png");
		$("#star4").attr("src","../image/star.png");
		$("#star5").attr("src","../image/star.png");
		$("#message").html("");
	}else if(check == 4){
		$("#star1").attr("src","../image/yellowStar.png");
		$("#star2").attr("src","../image/yellowStar.png");
		$("#star3").attr("src","../image/yellowStar.png");
		$("#star4").attr("src","../image/yellowStar.png");
		$("#star5").attr("src","../image/star.png");
		$("#message").html("");
	}else if(check == 5){
		$("#star1").attr("src","../image/yellowStar.png");
		$("#star2").attr("src","../image/yellowStar.png");
		$("#star3").attr("src","../image/yellowStar.png");
		$("#star4").attr("src","../image/yellowStar.png");
		$("#star5").attr("src","../image/yellowStar.png");
		$("#message").html("");
	}else if(check == 0){
		$("#star1").attr("src","../image/star.png");
		$("#star2").attr("src","../image/star.png");
		$("#star3").attr("src","../image/star.png");
		$("#star4").attr("src","../image/star.png");
		$("#star5").attr("src","../image/star.png");
		$("#message").html("");
	}
}
/*记录打分*/
function click(param){
	check = param;//记录当前打分
	out();//设置星星数
}

效果图如下：

https://blog.csdn.net/lzgs_4?t=1可以关注此博主的相关文章，本文思路参考。