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

最新推荐文章于 2025-03-12 13:07:56 发布

Isleta_

最新推荐文章于 2025-03-12 13:07:56 发布

阅读量2k

点赞数 2

分类专栏： summary 文章标签： javascript html5

本文链接：https://blog.youkuaiyun.com/Isleta_/article/details/105833144

版权

summary 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的星星评价功能，通过鼠标悬停和点击操作改变星星图标的状态，实现动态评分效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<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();//设置星星数
}