一个js简单版星星评分

fwxstar 2018-06-27 624次浏览

摘要: <div class="score">     <p class="score_stars"&...
<div class="score">
    <p class="score_stars">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </p>
    <p class="score_text">
    </p>
</div>
var score=document.getElementsByClassName("score")[0];
var stars=score.getElementsByClassName("score_stars")[0];
var starSpan=stars.getElementsByTagName("span");
var len=starSpan.length;

var scoreTxt=document.getElementsByClassName("score_text")[0];
var aTxt=['很差','一般','还行','推荐','力荐'];
/*减去星星*/
var rStar= function () {
    for(var i= 0;i<len;i++){
        starSpan[i].style.backgroundPosition = "-39px 0";
    }
    scoreTxt.innerText = '';
};

for(var i=0;i<len;i++){
    starSpan[i].index = i;

    starSpan[i].onmouseover= function () {
        rStar();
        for(var i= 0;i<= this.index;i++){
            starSpan[i].style.backgroundPosition = "-2px 0";
        }
        scoreTxt.innerText = aTxt[i-1];
    };

    starSpan[i].addEventListener("mouseout", rStar, false);


    starSpan[i].onclick= function () {
        this.removeEventListener("mouseout", rStar, false);
    };


}


项目预览地址:http://jsrun.net/6WgKp/edit