原生js星星评分源码

html:

<div id="fiveStars">
        <div>到场时间：<img v-for="(star,index) in stars.list" :src="star.src" @click="rating(index, stars)"  /></div>   // index,下标 stars 总的图片
</div>

 

引入图片路径：

//黑星星的路径
const starOff ='../../../static/img/wjx-old.png';
//亮星星的路径
const starOn='../../../static/img/wjx-new.png';

 

data:设置

stars: {
      list: [
                            {src: starOff, active: false},           // src: 图片星星，默认灰色，  active,添加
                            {src: starOff, active: false},
                            {src: starOff, active: false},
                            {src: starOff, active: false},
                            {src: starOff, active: false},
       ],
       starNum:0           // 点击星星的次数
},

 

methods:

rating(index, stars){
                let total = stars.list.length;//星星总数
                let idx = index + 1//代表应该显示的星星的数量
                if(stars.starNum ==0){ //只点了一个星星
                    stars.starNum =idx
                    for(var i=0;i<idx;i++){
                    stars.list[i].src=starOn;
                    stars.list[i].active=true;
                    }
                }else{
          //如果再次点击当前选中的星级-仅取消掉当前星级，保留之前的。
                    if(idx == stars.starNum){
                        for(var i=idx;i<total;i++){
                            stars.list[i].src=starOff;
                            stars.list[i].active=false;
                        }
                    }
          //如果小于当前最高星级，则直接保留当前星级
                    if(idx <stars.starNum){
                        for(var i=idx;i<stars.starNum;i++){
                            stars.list[i].src=starOff;
                            stars.list[i].active=false;
                        }
                    }
          //如果大于当前星级，则直接选到该星级
                    if(idx > stars.starNum){
                        for(var i=0;i<idx;i++){
                            stars.list[i].src=starOn;
                            stars.list[i].active=true;
                        }
                    }
                    let count =0;//当前几颗星
                    for(var i=0;i<total;i++){
                        if(stars.list[i].active){
                            count++;
                        }
                    }
                    stars.starNum =count;
          console.log(stars.starNum)
        }
},