五星好评

最新推荐文章于 2024-02-29 14:27:05 发布

trainhui

最新推荐文章于 2024-02-29 14:27:05 发布

阅读量116

点赞数

分类专栏： demo

本文链接：https://blog.csdn.net/trainhui/article/details/98474376

版权

demo 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>五星好评</title>
		<style>
			ul li{
				float: left;
        		list-style:none;
        		margin: 10px;
        		cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div>
			<ul id="starFath" >
			<li id="1">☆</li>
			<li id="2">☆</li>
			<li id="3">☆</li>
			<li id="4">☆</li>
			<li id="5">☆</li>
		   </ul>
		</div>
		
		<script type="text/javascript">
			var starFath=document.getElementById("starFath");
			var lis=document.getElementsByTagName("li");
			var len=lis.length;
				for(var i=0;i<len;i++){
					
				       lis[i].addEventListener("mouseover",function(){
//				       	console.log(i);
						  var index= this.id;
//						  console.log(index);
                         for(var j=0;j<index;j++){
                         	lis[j].innerHTML="★";
                         }
                         for(var k=index;k<len;k++){
                         	lis[k].innerHTML="☆";
                         	
                         }
                        
				       });
					}	
                 lis[0].addEventListener("mouseout",function(){
                 	lis[0].innerHTML='☆';
                 })
				
		</script>
			
			
		
	</body>
</html>