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></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 중국어 웹사이트의 기타 관련 기사를 참조하세요!