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

Question

我将获得4.3的平均评分，我需要建立逻辑以在星形图标中显示4.3平均评级（4颗全星，第5颗星为部分填充）。最大评级数是5.我通过引用stackoverflow示例创建了jsfiddle，我没有在我的选秀小提琴中获得部分明星，我得到了整个明星。My JSFiddle Screenshot

JSFiddle Link ：https://goo.gl/sz1YIJ请提供建议。

Answer 1

<强>更新

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

一个简单的解决方案

似乎只需要一点点的CSS和Javascript即可完成。

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

显然你可以更多地增强它，但我想展示所需的最低代码。

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

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我写了一个功能，可以满足你的需要。它只是设置部分图标的宽度，隐藏溢出。

function setFractionalRating(container, value) {
    var floor = Math.floor(value),
        ceil = Math.ceil(value),
        star = container.children[floor],
        slice = Array.prototype.slice,
        children = slice.call(container.children),
        visible = slice.call(children, 0, ceil),
        hidden = slice.call(children, ceil),
        size,
        width,
        portion;
  
    visible.forEach(function(star) {
        star.style.visibility = 'visible';
      	star.style.width = '';
    });
    hidden.forEach(function(star) {
        star.style.visibility = 'hidden';
        star.style.width = '';
    });

    size = star && star.getBoundingClientRect();
    width = size && size.width;
    portion = value - floor;

    if (star && portion !== 0)
        star.style.width = (width * portion) + 'px';
}


// Test:
var check = 1,
    debug = document.querySelector('.debug');
debug.appendChild(document.createTextNode(''));
setInterval(function(rating) {
    debug.firstChild.nodeValue = check.toFixed(1);
    setFractionalRating(rating, check);
    if ((check += 0.1) >= 5)
        check = 0.1;
}, 200, document.querySelector('.rating'));

.rating > i {
  display: inline-block;
  overflow: hidden;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="rating">
  <i class="glyphicon glyphicon-star"></i>
  <i class="glyphicon glyphicon-star"></i>
  <i class="glyphicon glyphicon-star"></i>
  <i class="glyphicon glyphicon-star"></i>
  <i class="glyphicon glyphicon-star"></i>
</div>
<div class="debug">
</div>
</div>