js实现电影评分

程序员文章站 2024-03-07 18:26:09

...

通过js技术实现电影评分

js实现电影评分

实现要求：

1.鼠标移入第一个五角星，五角星变为黄色，以此类推

2.鼠标移开黄色去掉

3.鼠标移入每一显示对应的评语

4.点击对应的每个五角星弹出对应的评分

实现代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0 auto;
				padding: 0;
			}
			.content{
				width: 160px;
				border: 10px solid #e6e6e6;
			}
			.pic{
				width: 160px;
				margin: 10px auto;
				border: 0;
			}
			.pic img{
				width: 160px;
			}
			#pingfen {
				width: 160px;
				margin: 10px auto;
				height: 32px;
			}
			
			#pingfen ul {
				height: 32px;
				margin-bottom: 32px;
			}
			
			#pingfen li {
				width: 32px;
				float: left;
				height: 32px;
				background: white;
				line-height: 32px;
				cursor: pointer;
				background: url(img/star.jpg) no-repeat 0 0;
				list-style: none;
			}
			#pingfen .active {
				background: url(img/star.jpg) no-repeat 0 -32px;
			}
			
			#pingfen p {
				width: 160px;
				height: 32px;
				background: white;
				line-height: 32px;
				text-align: center;
				font-size: 16px;
				border: 1px solid #ccc;
				display: none;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var aData = ['很差','较差','一般','推荐','力荐'];
				var oDiv = document.getElementById('pingfen');
				var oli = oDiv.getElementsByTagName('li');
				var oP = oDiv.getElementsByTagName('p')[0];
				var i = 0;
				for(i = 0; i < oli.length; i++) {
					oli[i].index = i;
					oli[i].onmouseover = function() {
						oP.style.display = 'block';
						oP.innerHTML = aData[this.index];
						for(i = 0; i<=this.index; i++) {
							oli[i].className = 'active';
						}
					};
					oli[i].onmouseout = function() {
						oP.style.display = 'none';
						for(i = 0; i < oli.length; i++) {
							oli[i].className = '';
						}
					};
					oli[i].onclick = function(){
						alert("评分成功,"+(this.index+1)+"分")
					}
				}

			}
		</script>
	</head>

	<body>
		<div class="content">
			<div class="pic">
				<img src="img/4.jpg"/>
			</div>
		<div id="pingfen">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<p>一般</p>
		</div>
		</div>
	</body>

</html>