JavaScript&JQ 001_五角星评分

先看图
       
1：前端HTML
<body>
    <div id="rank">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <p>一般</p>
         <p id="pf"></p>
    </div>
     
</body>

2：JS实现 demo




 <script type="text/javascript">
    var  shuzu=['很差','较差','一般',"很好",'非常好'];
    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;//为当前加个属性index--》索引值
        aLi[i].onmouseover=function(){   //让五角星变亮
          oP.style.display='block';
          oP.innerHTML=shuzu[this.index];
          for(i=0;i<=this.index;i++) {
            aLi[i].className='active';
          }
           document.getElementById("pf").style.display="none";
        }
        aLi[i].onmouseout=function(){    //移开事件
          oP.style.display='none';
         for(i=0;i<=this.index;i++) {
            aLi[i].className='';
         }
         document.getElementById("pf").style.display="none";
        }
        aLi[i].onclick=function(){ //点击将评分结果提交到服务器
         oP.style.display='none';
          document.getElementById("pf").style.display="block";
          //提交到服务器
          document.getElementById("pf").innerHTML= '您的本次评分：'+(this.index+1)+'分';
     
        }
      }
    }

 
    </script>






3：Jquery实现 demo






 <script type="text/javascript">
    var  shuzu=['很差','较差','一般',"很好",'非常好'];
     

$(function(){
    var liHightCount=0;
    $("#rank ul li").mouseover(function(){
     $("#rank ul li").addClass("active");//给所有的li都高亮
     $(this).nextAll("#rank li").removeClass("active");  //当前li-->后的li高亮样式类名remove
     liHightCount=$("#rank ul").find("li.active").length; //获取高亮的li的个数
     $("#rank p:eq(0)").show().html(shuzu[liHightCount-1]);
     $("#pf").hide();
    }).click(function(){
     $("#rank p:eq(0)").hide();
      $("#pf").show().html('您的本次评分：'+liHightCount+"分");
    });
})
    </script>






 


 




 









            

            
posted @ 
2013-04-06 13:02 
哈哈2222 
阅读(1860) 
评论(1) 
编辑 
收藏 
举报