使用 JS 实现评星效果

最新推荐文章于 2023-04-03 22:00:33 发布

小卷不卷

最新推荐文章于 2023-04-03 22:00:33 发布

阅读量747

点赞数 1

分类专栏： js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Youareseeing/article/details/125449472

版权

js 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

评星要求：

点击星星后，会变亮
当点亮星星时，如果前面有星星，默认点亮
点击的星星后面有星星时，其后的星星不能点亮

思路：默认 5 颗未被点亮的星星，要完成点亮星星很简单，就是一个图片替换的过程。

难点：是如何得到你所点击的星星的下标。

解决方法：通过遍历数组，再通过 this 这个函数得到下标即可。最后再根据下标完成要求。

放代码：

<body>
	<!-- ./imags/startblack.png  ./imags/startlight.png-->
	<img src="./imags/startblack.png" alt="">
	<img src="./imags/startblack.png" alt="">
	<img src="./imags/startblack.png" alt="">
	<img src="./imags/startblack.png" alt="">
	<img src="./imags/startblack.png" alt="">
	<script>
		var imgs=document.querySelectorAll("img");
		//遍历 imgs 给每一个 imgs[i] 赋予点击事件
		for(var i=0;i<imgs.length;i++){
			//通过遍历 找到你所点击的星星的下标
			imgs[i].onclick=function(){
				var index=1000;
				for(var j=0;j<imgs.length;j++){
					if(imgs[j] === this ){
						index=j;
                        break;
					}
				}
				console.log(index);
				for(var k=0;k<imgs.length;k++){
					if(k<=index){
						imgs[k].src="./imags/startlight.png";
					}
					else{
						console.log(imgs[k]);
						imgs[k].src="./imags/startblack.png";
					}
				}
			}
	    }
	</script>
</body>

注：var index=1000; index是随便取得一个数字，

for(var j=0;j<imgs.length;j++){
                   if(imgs[j] === this ){
                       index=j;
break;
                   }
               } this 代表你所点击的图片，这样就得到了图片的下标。

效果图：（默认）

（点击前三个星星）

（点击全部星星）

小卷不卷

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用 JS 实现评星效果

评星要求：思路：默认 5 颗未被点亮的星星，要完成点亮星星很简单，就是一个图片替换的过程。难点：是如何得到你所点击的星星的下标。解决方法：通过遍历数组，再通过 this 这个函数得到下标即可。最后再根据下标完成要求。放代码：注：var index=1000; index是随便取得一个数字，for(var j=0;j...
复制链接

扫一扫