How to Convert a Number into a Star Rating Display Using jQuery and CSS?

Converting a Number to a Star Rating Display with jQuery and CSS

When displaying rating systems, it's often useful to represent numerical values as star ratings. This can be achieved with the help of jQuery and CSS.

The Challenge:

Given a number like 4.8618164, the task is to transform it into a 4.8618164-star rating system with a maximum of 5 stars. The rating should be displayed using HTML elements and styling.

The Solution:

To create a star rating display, we will utilize the following elements:

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

Image:

Use an image file containing small star icons.

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>

Usage:

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

Result:

The code above will create a star rating display that corresponds to the given numerical values. The yellow stars indicate the filled-in rating, while the gray stars represent the remaining rating.

Explanation:

The $.fn.stars function converts numerical values into star ratings. It calculates the width of each star span based on the value. A width of 80px represents a full 5-star rating, and the width reduces proportionally for lower values. By overlaying the stars, we create a visual representation of the number as a star rating.

The above is the detailed content of How to Convert a Number into a Star Rating Display Using jQuery and CSS?. For more information, please follow other related articles on the PHP Chinese website!