【demo】纯js实现星级评比（半星单位）

效果

图片

---

代码

<div class="starassess">
<div class="assess-strip" id="assess-strip">
<li class="emptystar"><span class="leftstar" ></span><span class="rightstar"></span></li>
<li class="emptystar"><span class="leftstar"></span><span class="rightstar"></span></li>
<li class="emptystar"><span class="leftstar"></span><span class="rightstar"></span></li>
<li class="emptystar"><span class="leftstar"></span><span class="rightstar"></span></li>
<li class="emptystar"><span class="leftstar"></span><span class="rightstar"></span></li>
</div>
<p id="text-assess">评价</p>
</div>

.starassess {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	margin: auto;
	width: 50%;
	height: 200px;
	border: 1px solid #000;
	box-sizing: border-box;
	text-align: center;
}
.assess-strip {
	margin-top: 50px;
}
.emptystar {
	position: relative;
	display: inline-block;
	list-style: none; 
	width: 60px;
	height: 60px;
	background: url('img/emptystar.png');
	background-size: cover;
	transition: all .5s;
    -moz-transition: all .5s; /* Firefox 4 */
    -webkit-transition: all .5s; /* Safari 和 Chrome */
    -o-transition: all .5s; /* Opera */
}
.emptystar.halfstar {
	background: url('img/halfstar.png');
	background-size: cover;
}
.emptystar.fullstar {
	background: url('img/fullstar.png');
	background-size: cover;
}
.emptystar.blackhalfstar {
	background: url('img/blackhalfstar.png');
	background-size: cover;
}
.emptystar.blackfullstar {
	background: url('img/blackfullstar.png');
	background-size: cover;
}
.leftstar, .rightstar {
	display: inline-block;
	position: absolute;
	left: 0;
	height: 100%;
	width: 50%;
	border: none;
	filter: alpha(opacity=60);    /*ie*/
	opacity: .6;
}
.rightstar {
	left: 50%;
}

var assessStrip = byId("assess-strip").children;
var texts = ["很差","不好","一般","不错","很好"];
var textAssess = byId("text-assess");

function starClear(){
    for (var i = 0;i < assessStrip.length;i++){
        assessStrip[i].className = "emptystar";
    }
}
function starAssess(){
    var leftstar = document.getElementsByClassName("leftstar");
    var rightstar = document.getElementsByClassName("rightstar");
    var temp = 0;
    for(var i = 0; i < assessStrip.length;i++){
        (function(i){
            rightstar[i].onmouseover = function(){
                var starnum = i;
                starClear();
                if(i < 3){
                    for(var j = 0;j < starnum + 1;j++){
                    assessStrip[j].className = "emptystar blackfullstar";
                }
                }else{
                    for(var j = 0;j < starnum + 1;j++){
                        assessStrip[j].className = "emptystar fullstar";
                    }
                }
            }
        })(i);
    }
    for(var i = 0; i < assessStrip.length;i++){
        (function(i){
            leftstar[i].onmouseover = function(){
                var starnum = i;
                starClear();
                if(i < 3){
                    for(var j = 0;j < starnum ;j++){
                    assessStrip[j].className = "emptystar blackfullstar";
                    }
                    assessStrip[starnum].className = "emptystar blackhalfstar";
                }else{
                    for(var j = 0;j < starnum ;j++){
                        assessStrip[j].className = "emptystar fullstar";
                    }
                    assessStrip[starnum].className = "emptystar halfstar";
                }
            }
        })(i);
    }
    for(var i = 0; i < assessStrip.length;i++){
        (function(i){
            rightstar[i].onclick = function(){
                textShow(i*2+2);
            }
        })(i);
    }
    for(var i = 0; i < assessStrip.length;i++){
        (function(i){
            leftstar[i].onclick = function(){
                textShow(i*2+1);
            }
        })(i);
    }
    function textShow(temp){
        var _temp = temp%2 == 0 ? temp/2-1 : (temp-1)/2;
        textAssess.innerHTML = texts[_temp] + "-" + temp + "分";
    }
}

---

要点

1. 把一个li标签分成两部分 一部分半星一部分全星
2. 用闭包函数才能实时更新事件状态
3. 悬浮和点击是两个状态