原生js实现星星评分效果

最新推荐文章于 2022-12-06 16:20:25 发布

布朗狗熊

最新推荐文章于 2022-12-06 16:20:25 发布

阅读量817

点赞数 2

分类专栏： HTML JavaScript CSS

本文链接：https://blog.csdn.net/weixin_40196539/article/details/99685892

版权

JavaScript 同时被 3 个专栏收录

39 篇文章 4 订阅

订阅专栏

HTML

30 篇文章 0 订阅

订阅专栏

CSS

25 篇文章 0 订阅

订阅专栏

注意图片路径问题
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul,li,body{padding: 0;margin: 0;}
			
			li{
				float: left;
				list-style: none;
				width: 27px;
				height: 28px;
				background-image: url(img/star.gif);
				background-position: 0 0;
			}
		</style>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<div></div>
		<script type="text/javascript">
			var oLi = document.querySelectorAll("li");
			var oDiv = document.querySelectorAll("div")[0];
			var data = ["111","222","333","444","555"];//数组来存放对应的文本
			var flag = false;
			var index = 0;
			
			for(let i = 0;i < oLi.length;i++){//遍历所有li
				oLi[i].onmouseover = ()=>{//鼠标移入事件
					//先清后加
					for(let j = 0;j < oLi.length;j++){
						oLi[j].style.backgroundPosition = "0 0";
					}
					for(let j = 0;j <= i;j++){
						oLi[j].style.backgroundPosition = "0 -28px";
					}
				oDiv.innerHTML = data[i];
				}
				
				//鼠标点击事件
				oLi[i].onmouseout = ()=>{
					//清空样式
					for(let j = 0;j < oLi.length;j++){
						oLi[j].style.backgroundPosition = "0 0";
					}
					oDiv.innerHTML = "";
					if(flag){//如果点击事件触发执行以下代码
						for(let j = 0;j <= index;j++){
						oLi[j].style.backgroundPosition = "0 -28px";
					}
					oDiv.innerHTML = data[index];
					}
					
				}
				oLi[i].onclick = function(){//点击函数
					flag =true;
					index = i;
				}
			}
			
		</script>
	</body>
</html>

布朗狗熊

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
原生js实现星星评分效果

注意图片路径问题代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul,li,body{padding: 0;margin: 0;} ...
复制链接

扫一扫

专栏目录