javascript实现的淘宝五星评价（版本2）

最新推荐文章于 2024-03-06 20:14:13 发布

蒲公英1001

最新推荐文章于 2024-03-06 20:14:13 发布

阅读量1.1k

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/wangyining070205/article/details/115406259

版权

这篇博客展示了两种实现方式来创建一个点击选中的淘宝五星评分系统。第一种方式通过JavaScript为每个星级图片绑定点击事件，点击后改变图片源并显示对应的评价文字。第二种方式使用事件委托，监听div元素的鼠标悬停和点击事件，动态改变星级图片和评价文字。这两种方法都实现了从鼠标悬停到点击选择的交互转换。

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

今天又用了一下淘宝评价，发现淘宝评价不是鼠标移上去变化，而是直接用手点击。所以把前两天的代码又修改了一下，改成点击选中。
在这里插入图片描述

第一种实现方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>淘宝五星评分</title>
		<style>
			#mark{width: 360px;}
			#mark img{width: 24px;height: 24px;}
			.pic{font-size: 24px;}
			.float_r{float: right;}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="mark">
				<div id="pic1" class="pic" onmouseover="comments(1)">
					<strong>描述相符</strong>
					<img src="img/starw.png"  name="star1" data-index="1">
					<img src="img/starw.png"  name="star2" data-index="2">
					<img src="img/starw.png"  name="star3" data-index="3">
					<img src="img/starw.png"  name="star4" data-index="4">
					<img src="img/starw.png"  name="star5" data-index="5">
					<span id="txt1">	</span>
				</div>
				<div id="pic2" class="pic" onmouseover="comments(2)">
					<strong>物流服务</strong>
					<img src="img/starw.png"  name="star1" data-index="1">
					<img src="img/starw.png"  name="star2" data-index="2">
					<img src="img/starw.png"  name="star3" data-index="3">
					<img src="img/starw.png"  name="star4" data-index="4">
					<img src="img/starw.png"  name="star5" data-index="5">
					<span id="txt2">	</span>
				</div>
				<div id="pic3" class="pic" onmouseover="comments(3)">
					<strong>服务态度</strong>
					<img src="img/starw.png"  name="star1" data-index="1">
					<img src="img/starw.png"  name="star2" data-index="2">
					<img src="img/starw.png"  name="star3" data-index="3">
					<img src="img/starw.png"  name="star4" data-index="4">
					<img src="img/starw.png"  name="star5" data-index="5">
					<span id="txt3"></span>
				</div>
				<br>
					<button type="button" class="float_r" onClick="submit()">提交评论</button>
			</div><!--end mark-->
		</div>
	</body>
	<script type="text/javascript">
		function comments(num){
			var pic = document.getElementById("pic"+num);
			var imgList = pic.getElementsByTagName("img");
			var comments=["非常差","差","一般","好","非常好"];
			var txt= document.getElementById("txt"+num);
			for(var i=0;i<imgList.length;i++){
				imgList[i].onclick= function(){
					var index = this.getAttribute("data-index");
					for(var j=0;j<index;j++){
						imgList[j].setAttribute("src","img/starred.png");
					}    //index之前的红色星
					for(var k=index;k<imgList.length;k++){
						imgList[k].setAttribute("src","img/starw.png");
					}  //index之后的白色星
					txt.innerHTML=comments[index-1];
				}
			} //end for
		} //end function comments
		function submit(){
			document.write('谢谢您的评价!');
		}
	</script>
</html>

第二种实现方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>	淘宝五星评分click版</title>
		<style type="text/css">
			img{height: 24px;width: 24px;}
			body{font-size: 24px;}
		</style>
	</head>
	<body>
		<div id="pic1">
			<span>描述相符：</span>
			<img data-index='1' src="img/starw.png" >
			<img data-index='2' src="img/starw.png" >
			<img data-index='3' src="img/starw.png" >
			<img data-index='4' src="img/starw.png" >
			<img data-index='5' src="img/starw.png" >
			<span></span>
		</div>
		<div id="pic2">
			<span>物流服务：</span>
			<img data-index='1' src="img/starw.png" >
			<img data-index='2' src="img/starw.png" >
			<img data-index='3' src="img/starw.png" >
			<img data-index='4' src="img/starw.png" >
			<img data-index='5' src="img/starw.png" >
			<span></span>
		</div> 
		<div id="pic3">
			<span>服务态度：</span>
			<img data-index='1' src="img/starw.png" >
			<img data-index='2' src="img/starw.png" >
			<img data-index='3' src="img/starw.png" >
			<img data-index='4' src="img/starw.png" >
			<img data-index='5' src="img/starw.png" >
			<span></span>
		</div> 
	</body>
	<script type="text/javascript">
		var divs=document.querySelectorAll('div');
		for(var i=0;i<divs.length;i++){                //监听div
			divs[i].addEventListener('mouseover',over);
			}
		function over(){                             //监听img
				imgs=this.querySelectorAll('img');  //把var去掉，全局变量
				for(var k=0;k<imgs.length;k++){
					imgs[k].addEventListener('click',checked);
				}
		}
		function checked(){
				var index=this.getAttribute('data-index');
				var comments=["非常差","差","一般","好","非常好"];
				for(var j=0;j<index;j++){
					imgs[j].src='img/starred.png';
				}
				for(var j=index;j<imgs.length;j++){
					imgs[j].src='img/starw.png';
				}
				this.parentNode.lastElementChild.innerHTML=comments[index-1];
			}
	</script>
</html>