JS综合案例：实现打分评价
来自CloudWiki
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0 auto;
padding: 0;
}
.content{
width: 50%;
border: 2px solid #e6e6e6;
}
.qes{
width: 100%;
margin: 10px auto;
border: 0;
text-align: center;
}
#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/empty.png) no-repeat 0 0;
list-style: none;
}
#pingfen .active {
background: url(img/star.png) no-repeat 0 0;
}
#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="qes">
老师每堂课都进行了充分准备 ？
</div>
<div id="pingfen">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>一般</p>
</div>
</div>
</body>
</html>
