原生js实现星级评分

Posted 2020-10-17 麦兜家园

今天来实现下星级评分，后边并跟有评价文字。

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>

代码运行效果如下：