JavaScript&JQ 001_五角星評分

來源:互聯網
上載者:User
先看圖       
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>

 

 

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.