в моей базе данных есть номера 1
, 2
, 2.5
, 3
, 3.5
, 4
, 4.5
и 5
Я хочу преобразовать эти числа в звезды.
У меня полная звезда и звезда.
Как это сделать после получения информации из базы данных?
У меня есть тег рейтинга в базе данных.
<?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++; } ?>
* Предполагая, что вы используете PHP
Когда я это делал в прошлом, я использовал одно изображение из 5 пустых звезд под одним изображением 5 заполненных звезд. Я тогда сделал что-то вроде
filled-stars.width = (empty-stars.width * (rating / 5)
Таким образом, вы можете отображать рейтинги как 3.2978 и т. Д.
Вы можете сделать это с помощью PHP, HTML и CSS:
<div class="star-<?=$number?>"> <b></b><b></b><b></b><b></b><b></b> </div>
Затем вы можете создать стиль с помощью CSS, чтобы отображать фоновые изображения по звездам. Если вы конвертируете теги <b>
теги <a>
это, вероятно, более семантично.
Рассмотрим использование спрайтов . Начните с графика, содержащего ряд звезд для каждого возможного рейтинга, а затем вычислите смещение фона, умножив высоту каждой полузвездной графики на количество полузвезд в рейтинге.
Например:
<?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>
В сочетании с небольшим количеством Javascript вы можете реализовать полнофункциональный виджет рейтингов .
Здесь это добавляет звезды echo '*';
и половину, если нужно, echo '+';
Измените '*'
и '+'
например, на <img src="star.gif" />
и <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 '+';