如何使用 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中文網其他相關文章！