Question

我想显示（仅显示，不单击）具有典型5星级标记的实体的平均评分。该标记应可通过JavaScript进行调整，以便我可以设置/更新当前的平均评分。这应该包括刻度（全星和半星）。

我已经找到的解决方案使用特殊的字体，图像，并且过于复杂（我认为）（例如，用于许多html元素）。我希望有一种代码最少且易于集成的解决方案。

Answer 1

这是我自己的解决方案。您只需在HTML中添加嵌套的div，然后通过下面包含的样式表对其进行样式设置即可：

<div class="stars"><div class="percent"></div></div>

然后您可以通过设置width元素的css .percent来简单地设置以百分比表示的星数（每颗星20％；半颗星10％）。（出于演示目的，此处在html中添加了百分比值，但以后可以通过JS添加或修改百分比值）

.stars {
    position: relative;
    float: left;
    font-size: 50pt;
	  height: 1em;
    line-height: 1em;
}

.stars:before {	
    content: "\2606\2606\2606\2606\2606";
    float: left;
    z-index: 1;
}

.stars .percent {
    position: absolute;
    left: 0;
    float: left;
    overflow: hidden;
    z-index: -1;
}

.stars .percent:after {	
    content: "\2605\2605\2605\2605\2605";
    color: rgb(255, 200, 0);
}

li {
  display: table;
}

<ul>
<li><div class="stars"><div class="percent" style="width:  0%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 10%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 20%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 30%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 40%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 50%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 60%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 70%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 80%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 90%;"></div></div></li>
<li><div class="stars"><div class="percent" style="width: 100%;"></div></div></li>
</ul>

上面的代码段以10％的步长显示了从0％到100％的所有刻度。请注意，较小的步长不会平均分布在恒星内部，因为宽度调整不考虑恒星之间的空间-但是10％的步长是可以的。

如何在纯CSS中显示具有多个刻度（全星和半星）的5星评级？

1 个答案: