百度文库评分小练习

*{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';

            }

        }

    }

}