原生js實現星級評分

今天來實現下星級評分，后邊並跟有評價文字。

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如下：

.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如下：

<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>

代碼運行效果如下：