星级评价，点击星星进行评分

先贴一下效果图，是移动端和web端的通用功能：

css

.star {
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-top: 2rem;
}

.ct-star {
    display: inline-block;
    margin: 0 1px;
    width: 4rem;
    height: 5rem;
    background: url(../../images/stars.png) no-repeat;
}

.ic-star-off {
    display: inline-block;
    margin: 0 1px;
    width: 4rem;
    height: 5rem;
    background: url(../../images/stars-b.png) no-repeat;
}

.star-Txt {
    width: 100%;
    color: #E7AA58;
    display: block;
    text-align: center;
    margin-top: 1rem;
}

html

<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>
<div id="starTxt" class="star-Txt"></div>

 

js

var aSpan = document.getElementsByClassName("star")[0];
var aStxt = document.getElementById("starTxt");
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].onclick = function () {
        onOff = false;//开关为假就不执行鼠标移除的代码
        //先清空
        aStxt.textContent = "";
        for (var i = 0; i < aBstar.length; i++) {
            aBstar[i].setAttribute("class", "ic-star-off");
        }
        //点击当前星星，之前的都点亮包含自己
        num = this.index;
        aStxt.textContent = arrBtxt[num];
        $("#starLevel").val(num + 1);
        vm.starLevel = num + 1;//需要提交到后台的星级
        for (var i = 0; i <= this.index; i++) {
            aBstar[i].setAttribute("class", "ct-star");
        }
    };
}

用到的两类图片