五星评分

最新推荐文章于 2021-01-25 14:56:48 发布

weixin_34013044

最新推荐文章于 2021-01-25 14:56:48 发布

阅读量126

点赞数

文章标签：游戏

原文链接：http://www.cnblogs.com/-qiang/p/5794416.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}	
#ul{list-style:none;height:27px;float:left;}
#ul li{width:27px;height:27px;background:url('images/star.gif') no-repeat;float:left;}
#div{width:100px;height:27px;line-height:27px;float:left;color:green;margin-left: 10px;}
</style>
</head>
<body>
	<ul id="ul">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<div id="div"></div>	
	<script>
		// 给个li 对象
		var lis = document.getElementsByTagName('li');
		var ulObj=document.getElementById('ul');
		var divObj=document.getElementById('div');
		var bj = false;   // 表示没有评分

		for(var i=0;i<lis.length;i++){

			// 给每个 li 自定义一个 索引
			lis[i].index = i;

			// 给每个 li 绑定移入事件
			lis[i].onmouseover = function(){
				if(!bj){
					for(var i=0;i<lis.length;i++){
						if(i<=this.index){
							// 改变星星 背景图片的位置 让星星变亮
							lis[i].style.backgroundPosition = '0 -29px';
						}
					}					
				}
			}

			// 给每个 li 绑定点击事件
			// 用户点击 就表示 确定评分了
			lis[i].onclick = function(){
				if(!bj){
					bj = true;
					// 把评分结果 写到 容器中
					divObj.innerHTML = this.index+1+' 星';
				}
			}
		}
		// 鼠标移出 让星星 变灰色
		ulObj.onmouseout = function(){
			if(!bj){
				for(var i=0;i<lis.length;i++){
					lis[i].style.backgroundPosition = '0 0';
				}				
			}
		}


	</script>
</body>
</html>

转载于:https://www.cnblogs.com/-qiang/p/5794416.html