使用FontAwesome创建五星评分插件

效果示例：

引用js库

    <%--jquery的百度地址--%>
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <%--FontAwesome字体图标--%>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

<style>
    .well {
       
        min-height: 20px;
        padding: 19px;
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    }
    .star {
        cursor:pointer;
         font-size: 22px;
    }
    .fa-star {
        color: #e3cf7a;
    }
    .fa-star-o {
        color: #777;
    }
</style>

html元素以及js控制代码

<div class="well">
    <div>为此篇作品打分</div>
    <span id="star1" data-score="1" class="star fa fa-star-o" title="很差"></span>
    <span id="star2"  data-score="2" class="star fa fa-star-o" title="不太好"></span>
    <span id="star3" data-score="3" class="star fa fa-star-o" title="一般"></span>
    <span id="star4" data-score="4" class="star fa fa-star-o" title="较好"></span>
    <span id="star5" data-score="5" class="star fa fa-star-o" title="完美"></span>
    <span id="rate-score" style="margin-left:15px;">10</span>
    <span>分</span>

    <script>
        var myRate = 5;
        var generalRate = <%=GeneralRate%>;

        $(function () {

            $("#rate-score").text(generalRate);
            setRate(generalRate * 0.5);

            $("span.star").click(function () {
                myRate = $(this).attr("data-score");
                setRate(myRate);
                Rate(myRate)
            });
            $("span.star").hover(function () {
                setRate($(this).attr("data-score"));
            });
            $("div.well").mouseleave(function () {
                setRate(myRate);//恢复原始的打分数值
            });
 
        });
        function Rate(score) {
            if (confirm("评分"+myRate+"星，确定吗？")) {

            }
        }
        

        function setRate(score) {
            $("span.star").each(function () {
                var thisStar = $(this);
                if (thisStar.attr("data-score")<=score) {
                    thisStar.removeClass("fa-star-o").addClass("fa-star");
                } else {
                    thisStar.removeClass("fa-star").addClass("fa-star-o");
                }
            });
            
        }
        function clearRate() {
            $("span.star").each(function () {
                var thisStar = $(this);
                thisStar.removeClass("fa-star").addClass("fa-star-o");
            });
        }
        
    </script>
</div>