JavaScript - 使用Iconfont实现星星评分效果

星星评分效果效果如下

可以设置星星颜色和大小，这也是Iconfont的优点所在

<style>
    .star {
        color: yellowgreen;
        cursor: pointer;
        font-size: 40px;
    }
</style>

首先需要引入Iconfont的星星评分效果的css

<link rel="stylesheet" href="//at.alicdn.com/t/font_1805143_y840a2tl9ts.css">

星星的效果如下

引入jQuery库

<script src='https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js'></script>

在页面创建一个div容器

<div class="content"> </div>

下面是完整实现代码

<script>
    //定义总数量
    let count = 10
    let score = 5

    //初始化星星
    for (let i = 0; i < count; i++) {
        //创建标签
        let icon = $(`<span/>`).addClass('iconfont star')
        //前5个实心
        if (i < score) icon.addClass("icon-star")
        else icon.addClass("icon-star-o")
        //增加到容器
        $('.content').append(icon)
    }

    $('.content .star').mouseenter(function () {
        //当前悬浮的星星之前的都变成实心
        $(this).addClass('icon-star').removeClass('icon-star-o')
        $(this).prevAll().addClass('icon-star').removeClass('icon-star-o')
        //后面变成空心的
        $(this).nextAll().addClass('icon-star-o').removeClass('icon-star')
    })

    //鼠标离开时根据score来控制实心
    $('.content .star').mouseleave(function () {
        for (let i = 0; i < count; i++) {
            if (i < score) {
                $('.content .star').eq(i).addClass('icon-star').removeClass('icon-star-o')
            } else {
                $('.content .star').eq(i).addClass('icon-star-o').removeClass('icon-star')
            }
        }
    })

    //点击时改变分数
    $('.content .star').click(function () {
        score = $(this).index() + 1
    })
    
</script>