Wie konvertiere ich eine Zahl mithilfe von jQuery und CSS in eine Sternebewertungsanzeige?

Umwandeln einer Zahl in eine Sterne-Bewertungsanzeige mit jQuery und CSS

Bei der Anzeige von Bewertungssystemen ist es oft sinnvoll, numerische Werte als Sterne darzustellen Bewertungen. Dies kann mit Hilfe von jQuery und CSS erreicht werden.

Die Herausforderung:

Gegeben eine Zahl wie 4,8618164, besteht die Aufgabe darin, sie in einen 4,8618164-Stern umzuwandeln Bewertungssystem mit maximal 5 Sternen. Die Bewertung sollte mithilfe von HTML-Elementen und -Styling angezeigt werden.

Die Lösung:

Um eine Sternbewertungsanzeige zu erstellen, verwenden wir Folgendes Elemente:

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

Bild:

Verwenden Sie eine Bilddatei mit einem kleinen Stern Symbole.

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>

Verwendung:

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

Ergebnis:

Die Der obige Code erstellt eine Sternebewertungsanzeige, die den angegebenen Zahlenwerten entspricht. Die gelben Sterne zeigen die ausgefüllte Bewertung an, während die grauen Sterne die verbleibende Bewertung darstellen.

Erklärung:

Die Funktion $.fn.stars wandelt numerische Werte in um Sternebewertungen. Es berechnet die Breite jeder Sternspanne basierend auf dem Wert. Eine Breite von 80 Pixeln stellt eine vollständige 5-Sterne-Bewertung dar und bei niedrigeren Werten verringert sich die Breite proportional. Durch die Überlagerung der Sterne erstellen wir eine visuelle Darstellung der Zahl als Sternebewertung.

Das obige ist der detaillierte Inhalt vonWie konvertiere ich eine Zahl mithilfe von jQuery und CSS in eine Sternebewertungsanzeige?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!