订单评星（原生js）

star.gif

基本思路

工作中增加评星的需求，开始网上没有找到合适的方法，插件并不实用。星星亮和不亮用css背景图控制，开始PC端用的onmousemove，鼠标滑动改变分数。移动端不支持onmousemove，移动端改成了onclick。

css样式：

*{margin:0;padding:0;}
.pingfen{ width:135px;margin:10px auto;height:28px;}
.pingfen li{ width:27px;float:left;height:28px; cursor:pointer;background:url(star.gif) no-repeat 0 0; list-style:none;}

html：

<div id="pingfen" class="pingfen">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

js：

<script>
    window.onload=function(){
        var aLi=document.getElementsByTagName('li');

        for(var i=0; i<aLi.length; i++){
            aLi[i].index=i;
            aLi[i].onclick=function(){
                for(var i=0; i<aLi.length; i++){
                    if(i<=this.index){
                        aLi[i].style.background='url(star.gif) no-repeat 0 -29px';
                    }else{
                        aLi[i].style.background='url(star.gif) no-repeat 0 0px';
                    }
                }
                console.log('你打了'+(this.index+1)+'分')
            };

            
        }
    };
</script>

星星图片：

star.gif

总结：

欢迎大家和我一起讨论，有考虑不到的方面或者，其他技术方面的问题可以留言。