五星评分

最新推荐文章于 2021-01-26 17:36:57 发布

Dlinlin

最新推荐文章于 2021-01-26 17:36:57 发布

阅读量417

点赞数 2

分类专栏： JS

JS 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!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>
<title></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}

.pingfen
{
width: 135px;
margin: 10px auto;
height: 20px;
position: relative;
}

.pingfen ul
{
height: 20px;
margin-bottom: 10px;
}

.pingfen li
{
width: 20px;
float: left;
height: 20px;
cursor: pointer;
background-color:Red;
list-style: none;
border:1px solid black;
}

.pingfen .active
{
background: url(star.png) no-repeat 0 -28px;
}

.pingfen p
{
position: absolute;
top: 24px;
left: 0px;
width: 134px;
height: 28px;
background: #fff;
line-height: 28px;
text-align: center;
border: 1px solid #333;
display: none;
}
</style>
<script>
var aData = ["很差", "较差", "一般", "推荐", "力推"];
window.onload = function () {
var oDiv = document.getElementById("rank");
var aLi = oDiv.getElementsByTagName("li");
var oP = oDiv.getElementsByTagName("p")[0];
var i = 0;
for (i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function () {
oP.style.display = "block";
oP.innerHTML = aData[this.index];
for (i = 0; i <= this.index; i++) {
aLi[i].className = "active";
}
};
aLi[i].onmouseout = function () {
oP.style.display = "";
for (i = 0; i < aLi.length; i++) {
aLi[i].className = "";
}
};
aLi[i].onclick = function () {
alert(this.index + 1);
};
}
};
</script>
</head>
<body>
<div id="rank" class="pingfen">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>
加载中</p>
</div>
</body>
</html>