javascript之迅雷评分

最新推荐文章于 2020-11-25 16:29:16 发布

qianlingvip

最新推荐文章于 2020-11-25 16:29:16 发布

阅读量165

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhangqling/article/details/82807133

本文详细介绍了如何使用HTML、CSS和JavaScript实现鼠标悬停时星星变色及点击显示评分的效果，通过代码示例展示了交互功能的具体实现过程。

当鼠标划过时，对应的星星变颜色。点击时弹出您当前的评分为多少。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>迅雷评分</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width: 760px;
			margin: 20px auto 0;
		}
		ul{
			list-style: none;
		}
		li{
			width: 144px;
			height: 128px;
			background: url(1.jpg) -15px -165px no-repeat;
			display: inline-block;

		}
		.active{
			background-position: -178px -165px;
		}
		p{	display: none;
			width: 730px;
			height: 90px;
			line-height: 90px;
			text-align: center;
			border:solid 1px #ccc;
			font-size: 30px;
			box-sizing:border-box;
		}
	</style>
	<script>
		window.onload=function(){
			var bOx=document.getElementById("box");
			var oLi=bOx.getElementsByTagName("li");
			var oP=bOx.getElementsByTagName("p")[0];
			var Data=["很差","差","一般","良好","力荐"]
			for (var i=0;i<oLi.length; i++) {
				oLi[i].index=i;
				oLi[i].onmouseover=function(){
					oP.style.display="block";
					for (var i = 0; i <= this.index; i++) {
						oLi[i].className="active";
					}
					oP.innerHTML="评分为："+Data[this.index];
				}
				oLi[i].onmouseout=function(){
					for (var i = 0; i < oLi.length; i++) {
						oLi[i].className="";
					}
					oP.style.display="none";
				}
				oLi[i].onclick=function(){
					alert("恭喜您评分成功，当前评分为"+(this.index+1)+"分");
				}
			}
		}
		
	</script>
</head>
<body>
	<div class="box" id="box">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<p>良好</p>
	</div>
</body>
</html>

成果展示：

1、当鼠标没有划过时：