今天來實現下星級評分,後邊並跟有評價文字。css
html代碼以下:html
<span class="star"> <b class="ct-star ic-star-off"></b> <b class="ct-star ic-star-off"></b> <b class="ct-star ic-star-off"></b> <b class="ct-star ic-star-off"></b> <b class="ct-star ic-star-off"></b> </span> <span class="star-txt"></span>
css以下:this
.ct-star { display: inline-block; margin: 0 1px; width: 19px; height: 19px; background: url(img/stars.png) no-repeat; vertical-align: -2px; cursor: pointer; } .ic-star-off { background-position: -39px 0; }
js以下:url
<script> window.onload=function(){ var aSpan=document.getElementsByClassName("star")[0]; var aStxt=document.getElementsByClassName("star-txt")[0]; var aBstar=aSpan.getElementsByTagName("b"); var arrBtxt=["不好","較差","還行","推薦","力薦"]; var num=0; var onOff=true;for(var i= 0;i<aBstar.length;i++){ aBstar[i].index=i; //鼠標移入 aBstar[i].onmouseover=function(){ if(onOff) { num = this.index; aStxt.innerHTML = arrBtxt[num]; for (var i = 0; i <=this.index; i++) { aBstar[i].style.backgroundPosition = "0 0"; } } }; //鼠標移開 aBstar[i].onmouseout=function(){ if(onOff){//設定個開關,等開關爲真就執行鼠標移除的代碼 aStxt.innerHTML=""; for(var i=0;i<=this.index;i++){ aBstar[i].style.backgroundPosition="-39px 0"; } } }; //鼠標點擊 aBstar[i].onclick=function(){ onOff=false;//開關爲假就不執行鼠標移除的代碼 //先清空 aStxt.innerHTML=""; for(var i=0;i<aBstar.length;i++){ aBstar[i].style.backgroundPosition="-39px 0"; } //點擊當前星星,以前的都點亮包含本身 num = this.index ; aStxt.innerHTML=arrBtxt[num]; for(var i=0;i<=this.index;i++){ aBstar[i].style.backgroundPosition="0 0"; } }; } } </script>
代碼運行效果以下:spa