纯Javascript星级评价反馈实现点亮星星页面，鼠标点击星星上，星星自动亮且有提交反馈按钮

本文链接：https://blog.csdn.net/feng89284800/article/details/131240271

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Star feedback</title>
		<style>
			html,
			body {
				height: 100%;
				align-items: center;
				background-image: linear-gradient(to right, #ff4b4b, #d12280);
			}

			.stars {
				display: inline-block;
				font-size: 30px;
				cursor: pointer;
			}

			.stars:hover {
				color: orange;
			}

			.selected {
				color: orange;
			}

			.container {
				text-align: center;
				background-color: #fff;
				border-radius: 10px;
				width: 420px;
				height: 330px;
				margin: auto;
				position: absolute;
				top: 0px;
				left: 0px;
				right: 0px;
				bottom: 0px;
			}

			.stars {
				display: inline-block;
				font-size: 65px;
			}

			#feedback {
				font-size: 24px;
			}

			button {
				cursor: pointer;
				background: #F5C91A;
				border-radius: 4px;
				border-style: none;
				margin-top: 5px;
				padding: 1px 50px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h1><strong>请给出您的评价</strong></h1>
			<div class="stars" id="star1" onclick="selectStar(1)">★</div>
			<div class="stars" id="star2" onclick="selectStar(2)">★</div>
			<div class="stars" id="star3" onclick="selectStar(3)">★</div>
			<div class="stars" id="star4" onclick="selectStar(4)">★</div>
			<div class="stars" id="star5" onclick="selectStar(5)">★</div>

			<p id="feedback"></p>
			<a href="http://www.example.com/">
				<button>
					<h2 style=" color: #fff;">提交反馈</h2>
				</button>
			</a>
		</div>
		<script>
			let selectedStar = 0;
			const stars = document.querySelectorAll('.stars');
			const feedbackTexts = [ //对应文本
				"poor(很不好)",
				"bad(不好)",
				"okay(还一般)",
				"good(好)",
				"excellent(非常好)"
			];

			function selectStar(star) {
				selectedStar = star;
				// 用户选择的星级高亮显示相应数量的星星
				highlightStars(star);
				// 示用户选择的评价文本
				showFeedback(star);
			}

			function highlightStars(star) {
				for (let i = 0; i < stars.length; i++) {
					if (i < star) {
						stars[i].classList.add('selected');
					} else {
						stars[i].classList.remove('selected');
					}
				}
			}

			function showFeedback(star) {
				const feedback = document.getElementById('feedback');
				feedback.textContent = '您的评价是：' + feedbackTexts[star - 1];
			}
		</script>
	</body>
</html>