五星评分效果 原生js

时间：2023-03-08 20:55:15
五星评分效果 原生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" onclick="start('s3',this)">★</span></label>

        <label><input name="j_class" type="radio" class="disNo" value="2"><span class="start s3" onclick="start('s3',this)">★</span></label>

        <label><input name="j_class" type="radio" class="disNo" value="3"><span class="start s3" onclick="start('s3',this)">★</span></label>

        <label><input name="j_class" type="radio" class="disNo" value="4"><span class="start s3" onclick="start('s3',this)">★</span></label>

        <label><input name="j_class" type="radio" class="disNo" value="5"><span class="start s3" onclick="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一个就够了，在传人参数时只要保证第一个参数传人的不同就可以了，相信你会喜欢的

相关文章