js写评分机制

原文链接：原文

html代码

<div class="star-box">
        <div 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>
        </div>
        <span class="star-txt"></span>
</div>

用一个box包裹五颗星，并且加上了不同评分的文字描述

js代码

window.onload = function (){
        var aStxt = document.getElementsByClassName("star-txt")[0];
        var starts = document.getElementsByTagName("b");
        var arrTxt = ["很差","较差","还行","良好","推荐"];
        var num = 0;
        var onOff = true;
        for(let i=0;i<starts.length;i++){
            starts[i].index = i;//index是自定义属性，值为索引值
            starts[i].onmouseover = function(){//鼠标移动上去
                if(onOff){
                    num = this.index;
                    aStxt.innerHTML = arrTxt[num];
                    for(let j = 0;j < 5; j++){
                        if(j <= num)
                            starts[j].style.color = "red";
                    }
                }
            }
            starts[i].onmouseout = function(){//鼠标移开
                if(onOff){
                    num = this.index;
                    for(let j = num; j < 5 ; j++){
                        starts[j].removeAttribute("style");//移除
                    }
                }
            }
            starts[i].onclick = function(){//点击五角星
                // if(onOff){
                //     onOff = false;
                // }
                onOff = !onOff;
                if(!onOff)
                    alert(aStxt.innerHTML);
            }
        }
}

CSS代码

.star-box{
    position: absolute;
    top: 50%;
    left: 50%;
}
.ct-star{
    display: inline-block;
    margin: 0 1px;color: #999;
    font-size: 28px;
}

js写评分和css写评分都是比较基础的，为此整理一下