如何使用JS制作出星级评论

星级评论效果图如下:

css处代码：

<div class="box1">
        <span>❤</span>
        <span>❤</span>
        <span>❤</span>
        <span>❤</span>
        <span>❤</span>
</div>

 js处代码：

<script>
        //先获取所有的爱心
        let _all=document.querySelectorAll('.box1>span')
        console.log(_all);
        //遍历all，找每个爱心下标
        for(let a=0;a<_all.length;a++){
            _all[a].onclick=function(){
               var index=0;
               for(let b=0;b<_all.length;b++){
                   if(_all[b]===this){
                        index=b;
                        break;
                   }  
               }
               //设置点击的爱心下标改变颜色
               for(let c=0;c<_all.length;c++){
                   if(c<=index){
                       _all[c].style.color='red'
                   }else{
                    _all[c].style.color=''
                   }
               } 
            }
        }
    </script>

各位朋友可以去试一下效果！