如何动态为星号评分星星？ [英] How do I dynamically color stars in a star rating?
问题描述
我有一个表单，用户可以为某个产品评分，我需要在视觉上显示星级。我需要根据我从数据库检索的评级值为每个用户以及总体平均值着色星星。
例如，用户A给出了5星评级，而用户B只给了3星。当我显示用户A的评级时，我必须为所有5颗星进行着色，但是当我显示用户B的评级时，我只需要着色3颗星。这意味着我必须动态着色星星。
我在大多数网站上也看到了显示平均评级，他们有一半的星级，平均评级结束半个星。我也想这样做。
我的显示器不需要包含悬停功能。
我的问题是如何根据计算的平均值或从数据库提取的评级对星星着色。
<感谢您的帮助： - ）
<解决方案
有一个< span> 元素嵌套在另一个元素内。
外部 span> 具有空星的背景图像。
内部< span> ，以及在布局页面时以编程方式设置的 width：元素。例如， width：60.0％可用于3/5星评级。
对于一个小的优化，你甚至可以使用开始一个只有一个星星的图像，并使用repeat-x得到所有5颗星。您也可以在垂直方向上显示包含彩色和填充星的图片，并在显示时裁剪以确定您要引用的星标版本。
示例1 ：
例如，考虑以下CSS：
span。 rating-frame，span.rating-fill {
background：url（../ star.png）0 -16px repeat-x;
display：block;
width：80px; / *这是星的宽度的5倍，总共5星* /
height：16px;
}
span.rating-fill {
background-position：0 0; / *使用从图像顶部的（填写）版本* /
}
和以下HTML：
平均评分：4/5
< span class = >
< span style =width：80.0％; class =rating-fill> < / span>
< / span>
用户A：5/5
< span class =rating-frame>
< span style =width：100.0％; class =rating-fill> < / span>
< / span>
用户B：3/5
< span class =rating-frame>
< span style =width：60.0％; class =rating-fill> < / span>
< / span>
这假设star.png是一个16x32的图像， >
width属性的值由 userRating / maxPossibleRating 设置为四舍五入到适当的精度。当然，您显示的总体平均评分是由 averageUserRating / maxPossibleRating 设置。
示例2：
OP报告使用< span>☆< / span> 改为。以下伪代码可能有助于页面生成。
for（i = 1 to rating inclusive）{
print < span>★< / span>
}
//如果包含半星，请将此注释替换为代码。
for（i = rating + 1 to maxRating inclusive）{
print< span>☆< / span>
}
，但除非有半满的星号，否则不会能够在您的输出中使用它。
示例3：
eBay示例OP链接到使用源代码如下：
< span class =display-text-rating > 3.7颗星< / span>
< div class =star-rating-sectiontitle =3.7 out of 5 stars>
< span class =star-ratingrole =imgaria-label =3.7 stars>
< i class =fullStar>< / i>
< i class =fullStar>< / i>
< i class =fullStar>< / i>
< i class =midStar>< / i>
< i class =emptyStar>< / i>
< / span>
< / div>
第一行是以文本形式显示评级的打印文本。
div标题显示了鼠标悬停的信息。
span中的元素w /类属性可以很容易地以编程方式生成，如例2所示。CSS可以设置为使用不同的图像用于fullStar，midStar，和emptyStar。
示例3的缺点是视觉上四舍五入到最接近的一半-star（和示例2，到完整的星），而示例1允许分数星的更细粒度的区分，而不需要额外的编程或图像创建。决定适当的舍入水平是一个问题 UX.SE （如果任何人非常关心，请在此处链接进行编辑）。
I have a form where users can rate a product, where I need to visually show a star rating. I need to colour the stars according to the rating value I'm retrieving from the database, for each user as well as an overall average.
For example, user A has given a 5 star rating, and user B has given 3 stars only. When I display the rating of user A, I have to colour all 5 stars, but when I display the rating of user B, I have to colour only 3 stars. That means I have to dynamically colour the stars.
I have also seen on most sites when displaying average ratings, they have coloured half of the star where the average rating ends in half a star. I would like to do that too.
My display does not need to contain a hover feature.
My question is about how to colour the stars according to the calculated average or the rating pulled from the database.
I'm using codeigniter in my project.
Thank you for any help :-)
Have one <span> element nested inside another.
The outer <span> has a background image of empty stars.
The inner <span> has a background image of a colored-in star, and a width: element that is programmatically set when you layout the page. For example, width:60.0% could be used for a 3/5 star rating.
For a small optimization, you may even use start with an image that is only one star and use repeat-x to get all 5 stars. You could also have an image that includes both colored and filled-in stars vertically, and crop at display time to determine which version of the star you are referencing.
Example 1:
For example, consider the following CSS:
span.rating-frame, span.rating-fill {
background: url(../star.png) 0 -16px repeat-x;
display: block;
width: 80px; /* this is 5 times the width of the star, for 5 stars total */
height: 16px;
}
span.rating-fill {
background-position: 0 0; /* use the (filled-in) version from the top of the image */
}
and the following HTML:
Average Rating: 4/5
<span class="rating-frame">
<span style="width:80.0%;" class="rating-fill"> </span>
</span>
User A: 5/5
<span class="rating-frame">
<span style="width:100.0%;" class="rating-fill"> </span>
</span>
User B: 3/5
<span class="rating-frame">
<span style="width:60.0%;" class="rating-fill"> </span>
</span>
This assumes that star.png is a 16x32 image with the filled-in star on top.
The value for the width attribute is set by userRating/maxPossibleRating rounded to an appropriate precision. Of course, where you show the overall average rating, it's set by averageUserRating/maxPossibleRating.
Example 2:
OP reports using <span>☆</span> instead. The following pseudocode might be helpful in page generation there.
for (i = 1 to rating inclusive) {
print "<span>★</span>"
}
//if including a half-star, replace this comment with the code to do so.
for (i = rating+1 to maxRating inclusive) {
print "<span>☆</span>"
}
but unless you have a half-filled star character, you won't be able to use that in your output. You might try using the ½ character instead.
Example 3:
The eBay example OP links to uses source like this:
<span class="display-text-rating">3.7 stars</span>
<div class="star-rating-section" title="3.7 out of 5 stars">
<span class="star-rating" role="img" aria-label="3.7 stars">
<i class="fullStar"></i>
<i class="fullStar"></i>
<i class="fullStar"></i>
<i class="midStar"></i>
<i class="emptyStar"></i>
</span>
</div>
The first line is the printed text showing the rating in text form.
The div title shows that information on mouse hover.
The elements w/class attributes inside the span could easily be programmatically generated as in example 2. The CSS could be set to use different images for fullStar, midStar, and emptyStar. This generation process could be repeated for each user in the section where the users' individual ratings go.
Example 3 has the disadvantage of visually rounding to the nearest half-star (and example 2, to the full star), while example 1 permits more fine-grained distinction of fractional stars without requiring extra programming or image creation. Deciding on the appropriate level of rounding is a question for UX.SE (and if anyone does care enough to ask it, please edit in a link here).
这篇关于如何动态为星号评分星星？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
