Comment convertir un numéro en affichage de notes à l'aide de jQuery et CSS ?

Conversion d'un nombre en affichage de notes par étoiles avec jQuery et CSS

Lors de l'affichage des systèmes de notation, il est souvent utile de représenter les valeurs numériques sous forme d'étoiles évaluations. Ceci peut être réalisé avec l'aide de jQuery et CSS.

Le défi :

Étant donné un nombre comme 4.8618164, la tâche est de le transformer en 4.8618164 étoiles système de notation avec un maximum de 5 étoiles. La note doit être affichée à l'aide d'éléments et de styles HTML.

La solution :

Pour créer un affichage de note par étoiles, nous utiliserons les éléments suivants éléments :

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 :

Utiliser un fichier image contenant une petite étoile icônes.

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>

Utilisation :

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

Résultat :

Le Le code ci-dessus créera un affichage du nombre d'étoiles qui correspond aux valeurs numériques données. Les étoiles jaunes indiquent la note renseignée, tandis que les étoiles grises représentent la note restante.

Explication :

La fonction $.fn.stars convertit les valeurs numériques en classement par étoiles. Il calcule la largeur de chaque travée d'étoile en fonction de la valeur. Une largeur de 80 px représente une note complète de 5 étoiles, et la largeur diminue proportionnellement pour les valeurs inférieures. En superposant les étoiles, nous créons une représentation visuelle du nombre sous forme de nombre d'étoiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!