javascript - 我如何构建百分数glyphicon星状图标以填充十进制平均评分？

我将得到平均评级，如4.3，我需要建立逻辑，以显示4.3平均评级在星图标（4整颗星，第五颗星作为部分填充）。最大额定值为5。我通过引用stackoverflow示例创建了jsfiddle，我的草稿提琴中没有得到部分星星，结果得到了整个星星。My JSFiddle Screenshot
JSFiddle链接：https://goo.gl/sz1YIJ敬请指教。

最佳答案

更新：
作为对评论的回应，有数百个有用的unicode符号可以复制并粘贴到代码中，例如¨¨¨¨¨★🔎。这些效果比图标图像好，因为你可以用css设置颜色和大小。要查找符号，如下面标题中的人，请尝试搜索unicode-table
🙋一个简单的解决方案
似乎只要一点点css和Javascript就可以做到这一点。
这里我们有一个五颗星的div。我们调整宽度以显示或隐藏星星。关键是使用溢出隐藏和内联块样式，然后在初始化时捕获clientWidth。这比使用电磁装置或其他方法更可靠。
很明显，您可以增强它，但我想显示所需的最小代码。
运行代码段并输入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>