如何构建百分比字形星形图标来填充十进制平均评分？

Question

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

JSFiddle 链接：https://goo.gl/sz1YIJ请指教。

Answer 1

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

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>

Answer 2

更新：

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

? 一个简单的解决方案

---

似乎只需一点点 css 和 Javascript 就可以非常简单地完成。

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

显然您可以进一步增强它，但我想展示所需的最少代码。

运行 sn-p 并输入从 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>