如何使用 jQuery 和 CSS 将数字转换为星级显示？

使用 jQuery 和 CSS 将数字转换为星级显示

显示评级系统时，将数值表示为星号通常很有用评级。这可以借助 jQuery 和 CSS 来实现。

挑战：

给定一个像 4.8618164 这样的数字，任务是将其转换为 4.8618164 星评级系统最高为 5 星。评级应使用 HTML 元素和样式显示。

解决方案：

要创建星级评级显示，我们将利用以下内容元素：

CSS：

span.stars, span.stars span {
    display: block;
    background: url(stars.png) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
}

span.stars span {
    background-position: 0 0;
}

图像：

使用包含小星星的图像文件图标。

jQuery:

$.fn.stars = function() {
    return $(this).each(function() {
        var val = parseFloat($(this).html());
        var size = Math.max(0, (Math.min(5, val))) * 16;
        var $span = $('<span />').width(size);
        $(this).html($span);
    });
}

HTML:

<span class="stars">4.8618164</span>
<span class="stars">2.6545344</span>
<span class="stars">0.5355</span>
<span class="stars">8</span>

用法：

$(function() {
    $('span.stars').stars();
});

结果：

上面的代码将创建与给定数值相对应的星级显示。黄色星星表示已填写的评分，灰色星星表示剩余评分。

说明：

$.fn.stars 函数将数值转换为星级评定。它根据该值计算每个星跨度的宽度。 80 像素的宽度代表完整的 5 星级评级，宽度越低，则按比例减小。通过叠加星星，我们创建了数字的视觉表示作为星级评级。

以上是如何使用 jQuery 和 CSS 将数字转换为星级显示？的详细内容。更多信息请关注PHP中文网其他相关文章！