百度文库评分小练习

*{margin:0; padding:0; font-size:12px; font-family:"宋体";}
li{list-style:none;}
#pf{width:500px; height:60px; margin:50px auto 0; border-bottom:#CCC solid 1px; position:relative;}
#pf em{line-height:60px; margin-left:5px; font-weight:bold; font-size:14px; color:#F90; font-style:normal;}
strong{line-height:60px; float:left;}
ul{float:left; padding-top:10px;}
li{float:left; margin-left:5px; background:url(../images/star0.png) no-repeat; width:32px; height:32px;}
#pf .ali{float:left; margin-left:5px; background:url(../images/stara.png) no-repeat; width:32px; height:32px;}
.tex{width:200px; height:30px; border:#F90 solid 1px;; background:#FFC; position:absolute; right:0px; bottom:15px; display:none;}

<div id="pf">
    <strong>*总体评价</strong>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <em>极差</em>
    <div class="tex">
        <p>小提示：点星星就能参与评分</p>
    </div>
</div>

window.onload=function(){
    var oDiv=document.getElementById(‘pf‘);
    var oStr=oDiv.getElementsByTagName(‘strong‘)[0];
    var oLi=oDiv.getElementsByTagName(‘li‘);
    var oEm=oDiv.getElementsByTagName(‘em‘)[0];
    var aDiv=oDiv.getElementsByTagName(‘div‘)[0];

    var arrTex=[‘极差‘,‘较差‘,‘一般‘,‘良好‘,‘优秀‘];
    //alert(1)

    oStr.onmouseover=function(){
        aDiv.style.display=‘block‘;
    }
    oStr.onmouseout=function(){
        aDiv.style.display=‘‘;
    }

    for(var i=0; i<oLi.length; i++){
        oLi[i].index=i;
        oLi[i].onmouseover=function(){
            oEm.innerHTML=arrTex[this.index];
            for(var i=0; i<oLi.length; i++){
                oLi[i].className=‘‘;
            }
            for(var i=0; i<this.index+1; i++){
                oLi[i].className=‘ali‘;
            }
        }
    }
}