js实现五星评分的效果

今天在做后台管理系统的时候，有一个需求是要给完成的任务评分，用星级显示，网上查找了一些实现方法，发现有两种方法相对来说比较简单有效。

我在这整理一下这两种方法，以后出现类似的需求可以直接拿来用了。

方法一：

 1.  创建一个html页面后，先是在body里面加入如下代码：

       <div οnmοuseοver="rate(this,event)">
<img src="img/star.png" title="1分" />
<img src="img/star.png" title="2分" />
<img src="img/star.png" title="3分" />
<img src="img/star.png" title="4分" />
<img src="img/star.png" title="5分" />
</div>

       这里的名为star图片是空心的五星图片，可以去阿里图库下载

2.   然后js代码中写入rate方法

      function rate(obj, oEvent) {
// 图片地址设置
var imgSrc = 'img/star.png'; //没有填色的星星
var imgSrc_2 = 'img/star_full.png'; //打分后有颜色的星星,这里的star_full图片时实心的有颜色的五星。
if(obj.rateFlag) return;
var e = oEvent || window.event;
var target = e.target || e.srcElement;
var imgArray = obj.getElementsByTagName("img");
for(var i = 0; i < imgArray.length; i++) {
imgArray[i]._num = i;
imgArray[i].onclick = function() {
if(obj.rateFlag) return;
obj.rateFlag = true;
//this._num+1这个值写入到数据库中,作为评分的依据。

                                  可以在html页面加一个隐藏域，这里可以通过jquery把这个值赋值给隐藏域，保存的时候传给后台
};
}
if(target.tagName == "IMG") {
for(var j = 0; j < imgArray.length; j++) {
if(j <= target._num) {
imgArray[j].src = imgSrc_2;
} else {
imgArray[j].src = imgSrc;
}
}
} else {
for(var k = 0; k < imgArray.length; k++) {
imgArray[k].src = imgSrc;
}
}
}

        这样就可以简单的实现五星评分效果了。

方法二：

        一开始我是用这个方法的，但是这个方法测试时发现，jsp的页面在谷歌浏览器点击无效，也就是不会从空心五星变成实心五星，

         所以后来改用上面的方法。

        但是当时的实现效果还是挺好的，所以也整理出来，如果大家能发现在谷歌浏览器无效的原因，那最好了。

     1.  先创建一个html页面，然后在body里面加入如下代码：

<div class="wrapper">
            <div style="margin-left: 20px;line-height: 40px;float: left">评分：</div>
            <div style="float: left;margin-left: 20px;margin-top: 5px">
                <a href="javascript:dj(1);" class="img"><img src="img/star.png"/></a>
                <a href="javascript:dj(2);" class="img"><img src="img/star.png"/></a>
                <a href="javascript:dj(3);" class="img"><img src="img/star.png"/></a>
                <a href="javascript:dj(4);" class="img"><img src="img/star.png"/></a>
                <a href="javascript:dj(5);" class="img"><img src="img/star.png"/></a>
            </div>
        </div>
        <input type="hidden" id="score">   

        这里是在每个图片上加了一个点击事件，下面有一个隐藏域来保存点击后的数值，传到后台

          function dj(score){
        $("#score").val(score);
      }

          score就是数字参数

        2.  添加css代码

             .wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;} 
             a{float:left;width:26px;height:20px;background:url(img/sx.png) 0 -40px no-repeat;} 

        3. 加入js代码

             window.onload = function(){
            var star = document.getElementsByClassName('img');
            var temp = 0;
            for(var i = 0, len = star.length; i < len; i++){
                star[i].index = i;
                star[i].onmouseover = function(){
                    clear();
                    for(var j = 0; j < this.index + 1; j++){
                        star[j].style.backgroundPosition = '0 0';
                    }
                }
                star[i].onmouseout = function(){
                    for(var j = 0; j < this.index + 1; j++){
                        star[j].style.backgroundPosition = '0 -40px';
                    }
                    current(temp);
                }
                star[i].onclick = function(){
                    temp = this.index + 1;
                    current(temp);
                }
            }
            //清除所有
            function clear(){
                for(var i = 0, len = star.length; i < len; i++){
                    star[i].style.backgroundPosition = '0 -40px';
                }
            }
            //显示当前第几颗星
            function current(temp){
                for(var i = 0; i < temp; i++){
                    star[i].style.backgroundPosition = '0 0';
                }
            }
        };

       OK，这样也就可以实现五星评分了

          方法一 链接

        方法二 链接