JS 如何制作评论下的五角星

最新推荐文章于 2023-05-18 16:49:47 发布

郭郭郭憨憨

最新推荐文章于 2023-05-18 16:49:47 发布

阅读量363

点赞数 2

文章标签：大数据

本文链接：https://blog.csdn.net/qq_59494319/article/details/125444520

版权

这篇博客展示了如何使用HTML、CSS和JavaScript创建一个星星评分系统。通过点击星星，可以动态改变选中星星的数量，同时利用localStorage存储用户的选择。代码中涉及DOM操作、事件监听和图片替换，实现了一个交互式的评分功能。

摘要由CSDN通过智能技术生成

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span class="star"><img src="./img/星星.png"></span>
		<span class="star"><img src="./img/星星 (1).png"></span>
		<span class="star"></span>
		<span class="star"></span>
		<span class="star"></span>
		<script>
			var _star = document.getElementsByClassName("star");
			for (let i = 0; i < _star.length; i++) {
				_star[i].innerHTML = localStorage.getItem(`img${i}`) || `<img src="./img/星星.png">`;
				_star[i].onclick = function() {
					//找到点击的下标
					var index = -1;
					for (var j = 0; j < _star.length; j++) {
						if (_star[j] == this) {
							index = j;
							break;//当找到正确的索引之后，就不再循环（减少冗余量）
						}
					}
					// 设置图片
					for (var k = 0; k < _star.length; k++) {
						if (k <= index) {
							_star[k].innerHTML = `<img src="./img/星星 (1).png">`;
						} else {
							_star[k].innerHTML = `<img src="./img/星星.png">`;
						}
					}
				}
			}
		</script>
	</body>
</html>