如何构建百分比glyphicon星形图标以填充小数平均评级？

Question

我将获得4.3的平均评级,我需要构建逻辑以在星形图标中显示4.3平均评级(4颗全星,第5颗星为部分填充).最大评级数是5.我通过引用stackoverflow示例创建了jsfiddle,并且我没有在我的选秀小提琴中获得部分明星而且我得到了整个明星作为结果.我的JSFiddle截图

JSFiddle链接:https://goo.gl/sz1YIJ 请提出建议.

Answer 1

更新:

在回复评论时,您可以将数百个有用的unicode符号复制并粘贴到代码中,例如▲▼★.这些比图标图像效果更好,因为您可以使用css设置颜色和大小.要查找符号,如下面标题中的人,请尝试搜索unicode-table

简单的解决方案

似乎只需要一点点的CSS和Javascript就可以做到这一点.

在这里,我们有一个5星级的div.我们调整宽度以显示或隐藏星星.关键是使用溢出隐藏和内联块样式,然后在初始化时捕获clientWidth.这比使用em单元或其他方法更可靠.

显然你可以更多地增强它,但我想显示所需的最小代码.

运行代码段并输入0到5之间的任何小数星数值.

var cw = window.rating1.clientWidth; // save original 100% pixel width

function rating( stars ) {
  window.rating1.style.width = Math.round(cw * (stars / 5)) + 'px';
}

rating(4.3);

.rating {
  font-size: 48px;
  color: orange;
  display: inline-block;
  overflow: hidden;
}
.rating::before { 
  content: "?????" 
}

Enter a star rating 0-5: <input onkeyup="rating(this.value)" value="4.3"> 
<p>
<div id="rating1" class="rating"></div>