JS模拟百度文库评分

body,h3{margin:0; padding:0;}
#grade{width:500px; margin:100px auto;}
#grade span{float:left; color:#ff0808; margin-top:9px;}
#grade h3{float:left; height:22px; line-height:22px; font-size:16px; margin-top:9px;}
#stars{float:left;}
#stars a{float:left; width:22px; height:22px; background:url(star.png) 0 -22px; margin-top:9px;}
#notice{float:left; width:240px; padding-left:4px; color:#ef7300; font-size:14px; font-weight:bold; line-height:40px;}
#notice img{width:240px; height:40px; border:none; vertical-align:top;}
#notice span{display:none; margin-top:2px;color:#ef7300;}

<div id="grade">
<span>*</span>
<h3>总体评价：</h3>
<div id="stars">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div id="notice">
<span></span>
<img src="notice.png" />
</div>
</div>

window.onload = function(){
var oDivStars = document.getElementById('stars');
var aA = oDivStars.getElementsByTagName('a');
var oDivNotice = document.getElementById('notice');
var oSpan = oDivNotice.getElementsByTagName('span')[0];
var oImg = oDivNotice.getElementsByTagName('img')[0];
var arrText = ['很差','较差','还行','推荐','力荐'];
var onOff = false;
var num = 0;

// 鼠标经过，显示文字，同时隐藏图片提示
oDivStars.onmouseover = function(){
if(!onOff){
oSpan.style.display = 'block';
oImg.style.display = 'none';
}
};

// 鼠标移开，隐藏文字，同时显示图片提示
oDivStars.onmouseout = function(){
if(!onOff){
oSpan.style.display = 'none';
oImg.style.display = 'block';
}
};

// 循环遍历所有的a，执行相应事件
for (var i = 0; i < aA.length; i++) {
aA[i].index = i;
// 鼠标经过a
aA[i].onmouseover = function(){
grade(this.index, true);
};
// 鼠标移开a
aA[i].onmouseout = function(){
grade(num ,onOff);
};
// 鼠标点击a
aA[i].onclick = function(){
onOff = true;
num = this.index;
grade(num,onOff);
};
}

// 评分函数
function grade(num , onOff){
for (var i = 0; i < aA.length; i++) {
aA[i].style.backgroundPosition = '0 -22px';
};
if(onOff){
for(var i = 0; i<= num; i++){
if(i<2){
aA[i].style.backgroundPosition = '0 -44px';
}else{
aA[i].style.backgroundPosition = '0 0';
}
}
}
oSpan.innerHTML = arrText[num];
}
};