Bagaimana untuk Menukar Nombor menjadi Paparan Penarafan Bintang Menggunakan jQuery dan CSS?

Menukar Nombor kepada Paparan Penilaian Bintang dengan jQuery dan CSS

Apabila memaparkan sistem penilaian, selalunya berguna untuk mewakili nilai berangka sebagai bintang penilaian. Ini boleh dicapai dengan bantuan jQuery dan CSS.

Cabaran:

Memandangkan nombor seperti 4.8618164, tugasnya adalah untuk mengubahnya menjadi 4.8618164-bintang sistem penilaian dengan maksimum 5 bintang. Penilaian harus dipaparkan menggunakan elemen HTML dan penggayaan.

Penyelesaian:

Untuk mencipta paparan penarafan bintang, kami akan menggunakan perkara berikut elemen:

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

Imej:

Gunakan fail imej yang mengandungi bintang kecil ikon.

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>

Penggunaan:

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

Hasil:

The kod di atas akan mencipta paparan penarafan bintang yang sepadan dengan nilai berangka yang diberikan. Bintang kuning menunjukkan penilaian yang diisi, manakala bintang kelabu mewakili penilaian yang tinggal.

Penjelasan:

Fungsi $.fn.stars menukar nilai berangka menjadi penarafan bintang. Ia mengira lebar setiap rentang bintang berdasarkan nilai. Lebar 80px mewakili penarafan 5 bintang penuh dan lebar berkurangan secara berkadar untuk nilai yang lebih rendah. Dengan menindih bintang, kami mencipta perwakilan visual nombor sebagai penarafan bintang.

Atas ialah kandungan terperinci Bagaimana untuk Menukar Nombor menjadi Paparan Penarafan Bintang Menggunakan jQuery dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!