当鼠标划过时，对应的星星变颜色。点击时弹出您当前的评分为多少。
<!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、当鼠标没有划过时：
2、当鼠标划过时：
3、当点击时：
