JS写一个简单的五星评价

最新推荐文章于 2021-03-31 22:09:07 发布

音色丽敏

最新推荐文章于 2021-03-31 22:09:07 发布

阅读量1.4k

点赞数 2

分类专栏：原生javascript 文章标签： JS写一个简单的五星评价

本文链接：https://blog.csdn.net/qq_40756247/article/details/88310722

版权

原生javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

JS写一个简单的五星评价

在做前端网页页面的时候很多时候回有遇到星级评价的模块，用到的地方挺多所以自己就上传下方便大家和自己使用（不支持半星评价因为没有半星的图）。
效果图如下：
在这里插入图片描述
下面是我们的代码：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.star {
			width: 250px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border: 1px solid pink;
			margin: 100px auto;
		}
		.box1 {
			height: 40px;
			width: 40px;
			background-image: url(0.png)
		}
	</style>
	<body>
		<div class="star">
			<!-- 主体 -->
			<div class="box1">
			</div>
			<div class="box1">
			</div>
			<div class="box1">
			</div>
			<div class="box1">
			</div>
			<div class="box1">
			</div>
		</div>
		<script type="text/javascript">
			var arBox1 = document.getElementsByClassName("box1");
			for (let x = 0; x < 5; x++) {
				arBox1[x].onclick = function() {
					for (let y = 0; y < 5; y++) {
						arBox1[y].style.backgroundImage = "url(0.png)"
						for (let  z= 0; z <= x; z++) {
							arBox1[z].style.backgroundImage = "url(1.png)"
						}
					}
				}
			}
		</script>
	</body>
</html>

0图在这里插入图片描述
1图
注：点击事件可以改成其他，也可以加hover效果。

音色丽敏

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JS写一个简单的五星评价

JS写一个简单的五星评价在做前端网页页面的时候很多时候回有遇到星级评价的模块，用到的地方挺多所以自己就上传下方便大家和自己使用（不支持半星评价因为没有半星的图）。效果图如下：下面是我们的代码：&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;/hea..
复制链接

扫一扫