淘宝五星好评代码html+css+js

最新推荐文章于 2023-11-02 16:10:14 发布

看来是真做不了码农

最新推荐文章于 2023-11-02 16:10:14 发布

阅读量1k

点赞数

文章标签： html javascript css

本文链接：https://blog.csdn.net/KID66yang/article/details/130259862

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#mark {
				width: 360px;
			}

			#mark img {
				width: 24px;
				height: 24px;
			}

			.pic {
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<div id="mark">
			<div id="pic1" class="pic" onmouseover="comments(1)">
			<div <strong>描述相符</strong><img src="./img/starw.png" data-index="1">
				<img src="./img/starw.png" data-index="2">
				<img src="./img/starw.png" data-index="3">
				<img src="./img/starw.png" data-index="4">
				<img src="./img/starw.png" data-index="5">
				<span id="txt1"></span>
			</div>
		</div>
		<!--end mark-->
		<script type="text/javascript">
			function comments(num) {
				var pic = document.querySelector('#pic' + num);
				var imgList = pic.querySelectorAll('img');
				var comments = ["非常差", "差", "一般", "好", "非常好"];
				var txt = document.getElementById("txt" + num);
				for (let i = 0; i < imgList.length; i++) {
				 imgList [i].onclick = function() {
						var index = this.getAttribute("data-index");
						for (let j = 0; j < index; j++) {
							imgList[j].src = "./img/starred.png"; //  index之前的红色星
						}
						for (let k = index; k < imgList.length; k++) {
							imgList[k].src = "./img/starw.png";
							//index之后的白色星
							}
							txt.innerHTML = comments[index -1];
							}
						} //end for
					} //end function comments 
		</script>

	</body>
</html>