javascript实现的五星评价(版本1-1）

最新推荐文章于 2023-07-12 15:46:33 发布

蒲公英1001

最新推荐文章于 2023-07-12 15:46:33 发布

阅读量868

点赞数 3

文章标签： javascript

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

版权

最近学了一个商品五星评价的案例，又稍加修改完善，基本和淘宝的评价效果一致。
运行效果如图所示。
在这里插入图片描述
这实际上是用了红白两张星星图片，鼠标移上时，红色星星，鼠标离开时，白色星星；点击时，锁定状态，再点击，解锁。
完整代码如下：


<!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);
		var flag=false;
		for(var i=0;i<imgList.length;i++){
			imgList[i].onmouseover= function(){
				if(!flag){
				var index = this.getAttribute("data-index");
				for(var j=0;j<index;j++){
					imgList[j].setAttribute("src","img/starred.png");
				} //index之前的红色星
				
				txt.innerHTML=comments[index-1];
				}else{
					return;
				}
			}
			imgList[i].onmouseout= function(){
				if(!flag){
				var index = this.getAttribute("data-index");
				for(var j=0;j<imgList.length;j++){
					imgList[j].src="img/starw.png";
				}
				txt.innerHTML="";
				}else{
					return;
				}
			}
			imgList[i].onclick = function(){
				flag=!flag;
				var index = this.getAttribute("data-index");
				for(var k=index;k<imgList.length;k++){
					imgList[k].setAttribute("src","img/starw.png");
				}  //index之后的置成白色星
			}
		}
		}
		function submit(){
			document.write('谢谢您的评价!');
		}
	</script>
</html>

在这里插入图片描述

蒲公英1001

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
javascript实现的五星评价(版本1-1）

最近学了一个商品五星评价的案例，又稍加修改完善，基本和淘宝的评价效果一致。运行效果如图所示。这实际上是用了红白两张星星图片，鼠标移上时，红色星星，鼠标离开时，白色星星。完整代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>淘宝五星评分</title> <style> #mark{width: 360px;}
复制链接

扫一扫