基于HTML、CSS与jQuery的五角星评分组件实现

五角星评分组件实现概述

以下示例展示了如何使用HTML、CSS和JavaScript技术栈构建一个完整的五角星评分功能模块，供开发者参考与借鉴。

最终呈现的界面效果如下所示。

相关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>

JavaScript逻辑处理部分代码如下：

<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>

上述内容涵盖了实现该功能的核心代码，希望能为读者的技术学习提供有益帮助，同时也欢迎持续关注本站以获取更多技术分享。