星星评分.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>
