2012-04-20 52 views
8

en mis ı base de datos tienen números 1, 2, 2.5, 3, 3.5, 4, 4.5 y 5Conversión de números a calificación visual (estrellas)?

Quiero convertir estos números a las estrellas.

Tengo una estrella llena y media estrella.

¿Cómo puedo hacer eso después de obtener información de la base de datos?

Tengo la etiqueta de clasificación en la base de datos.

+0

Sólo para estar seguro: es un número exactamente lo que usted describe o puede haber alguna valor entre 1 y 5? Por ejemplo 3.75? –

+0

Estos son los valores exactos. este número es para calificar un objeto. –

+0

[Haga clic aquí] (http://stackoverflow.com/q/36491315/798371) para obtener una versión diferente de esta misma pregunta. – WBT

Respuesta

20
<?php 
    for($x=1;$x<=$starNumber;$x++) { 
     echo '<img src="path/to/star.png" />'; 
    } 
    if (strpos($starNumber,'.')) { 
     echo '<img src="path/to/half/star.png" />'; 
     $x++; 
    } 
    while ($x<=5) { 
     echo '<img src="path/to/blank/star.png" />'; 
     $x++; 
    } 
?> 

* Suponiendo que está usando PHP

+0

Faltan las estrellas vacías al final. ;) – hakre

+0

a la derecha, vamos a editarlo ahora :) –

+0

Si usa 'strpos', y puede encontrar un valor como' 4.0', se sorprenderá. ¡No trates y manejes los números como una cuerda! – Dyin

2

Usted puede hacer eso con PHP, HTML y CSS:

<div class="star-<?=$number?>"> 
    <b></b><b></b><b></b><b></b><b></b> 
</div> 

A continuación, puede estilo que con CSS, por lo que para mostrar las imágenes de fondo de acuerdo con la estrellas. Si convierte las etiquetas <b> a <a>, probablemente sean más semánticas.

+0

¿Cómo lo estilo con CSS? – Dyin

+0

con la clase. a continuación, puede contar niños y establecer su imagen de fondo de acuerdo con el nombre de clase div de sus padres. – hakre

+0

Estoy muy interesado en esto. ¿Puedes proporcionar un código de ejemplo? O tal vez podría implementar este tema con CSS? – Dyin

7

Cuando hice esto en el pasado, utilicé una imagen de 5 estrellas vacías debajo de una imagen de 5 estrellas rellenas. Entonces hice algo así como

filled-stars.width = (empty-stars.width * (rating/5) 

De esta manera se puede visualizar como calificaciones de 3,2978 etc.

+1

Me parece una idea bastante interesante. En realidad, puedes activar la estrella simplemente usa clases de CSS predefinidas para aplicar valores estrella redondeados (1.5, 3, etc.) o permite una gama completa de valores abstractos. – jmbertucci

+0

Excelente idea, si alguna vez necesito esta funcionalidad, usaré algo como esto. –

+0

Buena idea. Tus manos todavía están atadas, cuando quieres agregar funcionalidad de calificación, pero cuando solo necesitas mostrarla, ¡es perfecta! – Dyin

1

considerar el uso de sprites. Comience con un gráfico que contenga una fila de estrellas para cada clasificación posible, y luego calcule el desplazamiento de fondo multiplicando la altura de cada gráfico de media estrella por el número de medias estrellas en la calificación.

ej .:

<?php 
$offset = 
    ($rating/.5) // number of half-stars in $rating 
    * 15;    // height of each sprite in stars.png 
?> 
<div style="background-image:url("stars.png");background-position:0 <?php echo $offset; ?>px;"></div> 

combinado con un poco de JavaScript, puede implement a fully-featured ratings widget.

1

En este caso, esto se suma estrellas echo '*'; y mitades si es necesario echo '+';
Cambio '*' y '+' por ejemplo, para <img src="star.gif" /> y <img src="halfstar.gif" />

// This number of stars: 
$number = 2.7; 

// Make it integer: 
$stars = round($number * 2, 0, PHP_ROUND_HALF_UP); 

// Add full stars: 
$i = 1; 
while ($i <= $stars - 1) { 
    echo '*'; 
    $i += 2; 
} 
// Add half star if needed: 
if ($stars & 1) echo '+'; 
Cuestiones relacionadas