电影星星评分

最新推荐文章于 2019-06-13 16:21:19 发布

xidianyueyong

最新推荐文章于 2019-06-13 16:21:19 发布

阅读量794

点赞数 1

分类专栏： html5 js小部件，前端文章标签：电影评分电影星星评分电影星星打分星星评分星星打分

本文链接：https://blog.csdn.net/xidianyueyong/article/details/76285583

版权

html5 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

js小部件，前端

6 篇文章 0 订阅

订阅专栏

鼠标滑入星星变黄，滑出变灰

通过改变背景的position(灰色的星星和黄色的星星在一个图上)

具体代码如下：

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css"  href="css/1.css" rel="stylesheet"/>
<title>电影星星评分</title>
<script type="text/javascript" language="javascript" src="js/1.js"></script>
</head>

<body>
	<div  id="star">
    <p>点击星星进行评分</p>
    	<ul>
    	<li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    	</ul>
    </div>
    <div  id="src">
    <p></p>
    </div>
</body>
</html>

css：

@charset "utf-8";
/* CSS Document */

#star
{
	
}
#star>ul
{
	display:block;
	list-style:none;
}
#star ul li
{

	margin:2px  4px 2px 2px;
	background:url(../image/star.png) no-repeat;
	float:left;
	width:19px;
	height:23px;
}
#star li.active
{
	margin:2px  4px 2px 2px;
	background:url(../image/star.png) no-repeat;
	float:left;
	width:19px;
	height:23px;
	background-position:0 -27px;
}
#src>p
{
	display:block;
	background-color:#CC3;
}

值得注意的是#src>p 和#src p 的区别：

简单的阿说#src>p主要针对的是二级子元素

#src p 针对父元素后面的所有元素

js:

// JavaScript Document
window.οnlοad=function()
{
	var odiv=document.getElementById("star");
    var pdiv=document.getElementById("src");
	var op=pdiv.getElementsByTagName("p")[0];
	var oul=odiv.getElementsByTagName("ul")[0];
	var oli=oul.getElementsByTagName("li");
	var psrc=['很差','较差','一般','较好','非常好'];
	var star=0;//记录分数
	var i=0;
	for(i=0;i<oli.length;i++)
	{
		oli[i].index=i;
		oli[i].onmouseover =function()
		{
			for(i=0;i<oli.length;i++)
			{
				oli[i].className='';              //清除上次操作的结果
			}
			for(i=0;i<=this.index;i++)
			{
				oli[i].className='active';
			}
			
		};
		oli[i].onmouseout =function()
		{
			for(i=0;i<oli.length;i++)
			{
				oli[i].className='';              //  //清除上次操作的结果
			}
			if(star>0)
			{
				for(i=0;i<star;i++)
				{
					
					oli[i].className='active';
				}	
			}
			else if(star==0)
			{
				for(i=0;i<oli.length;i++)
				{
					
					oli[i].className='';
				}	
			}	
		};
		oli[i].οnclick=function()
		{
			star=(this.index+1);
			op.innerHTML="您打得评分为："+(this.index+1)+"<br/>"+psrc[this.index];
		}
	}
};