原生实现--星星评分功能

最新推荐文章于 2022-09-27 16:32:53 发布

我的咖啡厅

最新推荐文章于 2022-09-27 16:32:53 发布

阅读量178

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45451197/article/details/105021037

版权

星星评分的具体实现原理如下代码：

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		body,ul,li{
			padding:0;
			margin:0;
		}

		/* 把图片放到li里面 */
		li{
			list-style: none;
			float:left;
			height:28px;
			width:27px;
			background:url(img/star.gif) no-repeat 0 0;
		
		}


	</style>
</head>

<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<div id="tip"></div>
	<script type="text/javascript">
		let oList = document.querySelectorAll("li");
		let oTip = document.getElementById("tip");
		let flag = false; //开关
		let curIndex = 0;
		let arr =[1,2,3,4,5];
	

		for(let i = 0;i<oList.length;i++){																			
			oList[i].onmousemove = function(){
				for(let j=0;j<oList.length;j++){
					oList[j].style.backgroundPosition = "0 0";
				}
				//当前的和之前的要点亮
				for(let j = 0;j<=i;j++){
					oList[j].style.backgroundPosition = "0 -28px";
					//鼠标移入的时候 亮星星上去
				}
				oTip.innerText = arr[i];
			}

			
			
			
			
			oList[i].onmouseout = function(){
				for(let j = 0;j<oList.length;j++){
					oList[j].style.backgroundPosition = "0  0";
					//鼠标移出的时候 亮星星下去
				}

					oTip.innerText = "";
					if(flag){
					for(let j= 0;j<=curIndex;j++){
						oList[j].style.backgroundPosition = "0 -28px";
					}
					oTip.innerText = arr[curIndex];
				}
			}

			
			
			
			
			
			
			oList[i].onclick = function(){
				flag = true;
				curIndex = i;
			}
		}
	</script>
</body>

大家有什么不清楚的地方一定要及时提出来及时解决问题欢迎大家一起讨论！！相信自己是最棒的！O(∩_∩)O哈~

我的咖啡厅

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生实现--星星评分功能

星星评分的具体实现原理如下代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li{ padding:0; margin:0; ...
复制链接

扫一扫