css+html+js实现五角星评分

本文实例为大家分享了css+html+js实现五角星评分的具体代码，供大家参考，具体内容如下

效果图：

css：

<style>
        .evaluation {
            text-align: center;
        }

        .title_15mhc {
            font-size: 26px;
            color: #252a30;
        }

        .stars {
            margin: auto;
            width: 54％;
        }

        .star {
            font-size: 30px;
            color: #FF8000;
            margin-right: 5px;
            -webkit-transition: all .3s;
            cursor: pointer;
        }

        .hs {
            color: #ccc;
        }
</style>

html： 

<div class="evaluation">
        <div class="title_15mhc" id="myd_box">
            非常满意
        </div>
        <div style=" width:100％;text-align:center;">
            <div class="stars">
                <span data-value="1" class="star">&#9733;</span>
                <span data-value="2" class="star">&#9733;</span>
                <span data-value="3" class="star">&#9733;</span>
                <span data-value="4" class="star">&#9733;</span>
                <span data-value="5" class="star">&#9733;</span>
            </div>
        </div>
    </div>

js：

<script type="text/javascript" src="/jquery-1.9.1.min.js"></script>
    <script>
        $(function () {
            var isclick = false;
            $(".stars").hover(function () {
            }, function () {
                if (isclick) {
                    var level = $("#Level").val();
                    if (level > 0) {
                        $(".stars span").eq(level - 1).nextAll().addClass('hs');
                    }
                }
            });

            $(".stars span").hover(function () {
                if (isclick) {
                    $(this).removeClass('hs');
                }
                $(this).nextAll().addClass('hs');
            }, function () {
                if (!isclick) {
                    $(this).removeClass('hs');
                    $(this).prevAll().removeClass('hs');
                    $(this).nextAll().removeClass('hs');
                }

            });

            $(".stars span").click(function () {
                $(this).removeClass('hs');
                $(this).prevAll().removeClass('hs');
                var value = $(this).data("value");
                $("#Level").val(value);
                switch (value) {
                    case 1:
                        $("#myd_box").html("非常不满意");
                        break;
                    case 2:
                        $("#myd_box").html("不满意");
                        break;
                    case 3:
                        $("#myd_box").html("基本满意");
                        break;
                    case 4:
                        $("#myd_box").html("满意");
                        break;
                    default:
                        $("#myd_box").html("非常满意");
                        break;
                }
                isclick = true;
            });
        });
</script>

来源：https://blog.csdn.net/weixin_43833100/article/details/113970026