五星评分效果 原生js

　　五星评分在很多地方都可以用到，网上也有插件或者相应的代码，在这里我给大家提供一款我自己写的超级简单实用的五星评分代码，连图片都不需要

<!-- 评分start -->
<ul>    
    <li class="start_li3"><span class="grade">评分：</span>
        <label><input name="j_class" type="radio" class="disNo" value="1"><span class="start s3" οnclick="start('s3',this)">★</span></label>
        <label><input name="j_class" type="radio" class="disNo" value="2"><span class="start s3" οnclick="start('s3',this)">★</span></label>
        <label><input name="j_class" type="radio" class="disNo" value="3"><span class="start s3" οnclick="start('s3',this)">★</span></label>
        <label><input name="j_class" type="radio" class="disNo" value="4"><span class="start s3" οnclick="start('s3',this)">★</span></label>
        <label><input name="j_class" type="radio" class="disNo" value="5"><span class="start s3" οnclick="start('s3',this)">★</span></label>
    </li>
</ul>
<style type="text/css">
    *{margin: 0;padding: 0;}
    ul,li{list-style: none;}
    .start_li3{
        -moz-user-select: -moz-none;
       -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
    }
    .disNo{display: none;}
    .start{
        cursor: pointer;
        font-family: "微软雅黑";
        font-size: 18px;color: #999;
    }
</style>
<script type="text/javascript">
    function start(ele,that){
        var starts = $('.'+ele);
        var x = $(starts).index(that)
        starts.css("color","#999");
        for(var i =0 ;i<=x;i++){
            starts.eq(i).css("color","#ff9800")
        }
    }
</script>                    
<!--评分end-->

可以复制到页面看看效果，如果有多个评分，js一个就够了，在传人参数时只要保证第一个参数传人的不同就可以了，相信你会喜欢的

转载于:https://www.cnblogs.com/chengjunL/p/6096599.html