利用JS和CSS做的星级评分

最新推荐文章于 2021-07-07 17:52:22 发布

七里香777

最新推荐文章于 2021-07-07 17:52:22 发布

阅读量207

点赞数

分类专栏：笔记 # CSS 文章标签： js css

本文链接：https://blog.csdn.net/weixin_44286392/article/details/106447331

版权

笔记同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

CSS

15 篇文章 0 订阅

订阅专栏

第三篇
动态星级评分

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>星级评分</title>
	<style type="text/css">
		body{
			background: #e898ba66;
		}
		.pingfen{
			width: 460px;
			height: 200px;
			background: #fff;
			margin: 150px auto;
			border-radius: 5px;
		}
		.header{
			width: 100%;
			height: 70px;
			border-bottom: 1px solid rgb(225, 86, 113);
			font-size: 30px;
			color: rgb(225, 86, 113);
			font-weight: bolder;
			text-align: center;
			line-height: 72px;
		}
		.content{
			width: 100%;
			height: 72px;
		}
		.stars{
			width: 50%;
			list-style: none;
			margin: 0;
			line-height: 67px;
			color: #ccc;
			margin-left: 30px;
			float: left;
		}
		.stars span{
			font-size: 30px;
			margin-left: 10px;
		}
		.stars span:after{
			content: '☆';
		}
		.stars .show:after,.stars .show2:after{
			content: '★';
		}
		.info{
			float: left;
			width: 60px;
			height: 30px;
			background: #e15671;
			border-radius: 5px;
			color: #fff;
			margin-top: 21px;
			text-align: center;
			line-height: 30px;
			display: none;
		}
		.tips{
			width: 100%;
			height: 58px;
			background: rgb(225, 86, 113);
			color: #fff;
			line-height: 58px;
			text-align: center;
		}
		.show{
			/*浅粉色*/
				color: #e4c6e4;
			}
		.show2{
			/*粉色*/
			color: #e15671; 
		}
	</style>
</head>
<body>
	<div class="pingfen">
		<div class="header">总体评价	</div>
		<div class="content">
			<div class="stars">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		<div class="info">优秀</div>
		</div>
		<div class="tips">小提示：点击星星就能打分
		</div>
	</div>

	<script>
		var stars=document.querySelectorAll('.stars span');
		//var stars=document.getElementsByTagName("span")
		var info=document.querySelector('.info');
		var grades = ["极差","差","一般","良好","优秀"];
		var active=-1;   //记录当前点击的是哪颗星星
 
		for(var i=0;i<stars.length;i++){
			stars[i].index=i;
			stars[i].onmouseover=function(){setStar(this.index);};
			stars[i].onmouseout=function(){setStar(active);};
			stars[i].onclick=setClick;
		}
 
		function setStar(nub){
		
			var name='';
			name= nub<2?'show':'show2';
			for(var i=0;i<stars.length;i++){
				stars[i].className= i<=nub?name:'';
			}
			info.style.display= nub<0? 'none':'block';
			info.innerHTML=grades[nub];
		}
 
		function setClick(){
		active=this.index;
		
		}

	</script>
</body>
</html>