评分组件（星星）

星星评分.png

1.文字型（不带半星）

html结构

    <input type="hidden" value=""  title="11">
    <input type="hidden" value="">

css样式

    <style>
    .stars{padding-left:16px;padding-top:7px;}
    .stars:after{ 
            content: '';
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
        .clearfix{ /*兼容 IE*/
            zoom: 1;
        }
    .stars ul li,.stars ul,.stars span{ float:left;}
    .stars ul li{ list-style: none; font-size: 32px; color:#999; padding-right:3px; cursor: pointer;user-select: none; }
    .stars ul .col{color: #ffc20e;/*文字渐变*/background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(252,175,23, 1)), to(rgba(252,241,110, 0.6)));-webkit-background-clip: text;-webkit-text-fill-color: transparent; }
    .stars span{display:inline;padding-left:20px; height:79px;line-height:79px;font-weight:bold;}
    </style>

js代码

    <script>
        var input=document.querySelectorAll('input[type="hidden"]');
        input.forEach(function(_input){
            var _inputTiT=_input.getAttribute('title')|| 5;
            var div=document.createElement('div');
            div.className='stars';
            _input.parentNode.insertBefore(div,_input);
            var ul=document.createElement('ul');
            div.appendChild(ul);
            var name= ["零","特别差，给1分","很差，给2分","一般般，给3分","很好，给4分","非常好，给5分","特别好，给6分","好极了，给7分","好的一塌糊涂，给8分","无可挑剔，给9分","完美无缺，给10分","好的没话说~"];
            for (var i =1; i <=_inputTiT; i++){
                var li=document.createElement('li');
                ul.appendChild(li);
                li.innerHTML='★';
                li.title=name[i];
            }
            var span=document.createElement('span');
            div.appendChild(span);

            var LI=ul.querySelectorAll('li');
            for (var j = 0; j <= _input.value; j++) {
                if(_input.value=="")break;
                LI[j].className = 'col';
            }
            if (_input.value>10) {
                span.innerHTML=name[11];
            }
            // span.innerHTML=name[_input.value]?:"";
            LI.forEach(function(_li,a){
               //点击评分
                _li.onclick=function(){
                    span.innerHTML=_li.title;
                    _input.value=a;
                }
                //移到星星上
                _li.onmouseover=function(){
                    for (var i = 0; i < LI.length; i++) {
                        LI[i].className ='';
                }
                    for (var j= 0; j <= a; j++ ){
                        LI[j].className='col';
                    }
                }
                //移开后
                _li.onmouseout=function(){
                    for (var i = 0; i < LI.length; i++) {
                        LI[i].className = '';
                    }
                    for (var j = 0; j <=_input.value; j++) {
                        if(_input.value=="")break;
                         LI[j].className = 'col';
                    }
                }
            })
        })
    </script>

2.图片型（带半星）

星星评分2.png
x.png

html结构

    <input type="hidden" title="10" value="3.5">
    <input type="hidden" title="5" value="1.5">

css样式

    <style>
        .xin{height: 25px; background: url(x.png); position: relative; display: inline-block;}
        .xin span{display: block; height: 25px; background: #7fb80e; position: absolute; left: 0; top: 0;z-index: -1;transition: 0.2s;}
        .xin ul{position: absolute; top: 0; left: 0; height: 25px; margin: 0; padding: 0; list-style: none;}
        .xin ul li{float: left; width: 18px; height: 25px;}
        .fensu{display: inline-block;}
    </style>

js代码

    <script>
        var input=document.querySelectorAll("input[type=hidden]");
        input.forEach(function(_input){
            var Div=document.createElement("div");
            Div.className="xin";
            Div.style.width=18*(_input.title || 5)*2 + "px";
            _input.parentNode.insertBefore(Div,_input);
            var span=document.createElement("span");
            span.style.width=(_input.value)*36+"px";
            var p=document.createElement("p");
            p.innerHTML=_input.value+"分";
            p.className="fensu";
            Div.parentNode.insertBefore(p,Div);
            Div.parentNode.insertBefore(Div,p);
            Div.appendChild(span);
            var ul=document.createElement("ul");
            Div.appendChild(ul);
            for(var i=0;i<(_input.title || 5)*2;i++){
                var li=document.createElement("li");
                li.title=(i+1)/2+"分";
                ul.appendChild(li);
            }
            var LI=ul.querySelectorAll("li");
            LI.forEach(function(_li,x){
                _li.onclick=function(){
                    _input.value=(x+1)/2;
                    span.style.width=18*(x+1)+"px";
                    p.innerHTML=_input.value+"分";
                }
                _li.onmouseover=function(){
                    span.style.width=18*(x+1)+"px";
                }
                _li.onmouseout=function(){
                    span.style.width=(_input.value)*36+"px";
                }
            })
            var br=document.createElement("br");
            p.parentNode.insertBefore(br,p);
            p.parentNode.insertBefore(p,br);
        })
    </script>