简易五星评价

效果图 

 

html部分

<div class="wrapper">
        <span class="sp">❤</span>
        <span class="sp">❤</span>
        <span class="sp">❤</span>
        <span class="sp">❤</span>
        <span class="sp">❤</span>
    </div>

css部分

<style>
        
        span{
            color:rgb(112, 36, 166);
            font-size: 100px;
        }
        .red{
            color: red;
        }
    </style>

js部分

<script>
        let _sp=document.querySelectorAll('.sp')
        _sp.forEach((_span,index)=>{
            _span.onclick=function(){
                if(!_sp[index].classList.contains('red')){
                    for(let a=0;a<=index;a++){
                        _sp[a].classList.add('red')
                    }
                }else{
                    for(let b=index+1;b<=4;b++){
                        _sp[b].classList.remove('red')
                    }
                }
            }
        })
    </script>

以上就是五星评价的所有代码。