javascript - 它们如何代表电影在 imdb、烂番茄上的平均评分？

Question

好吧，假设电影/餐厅的平均评分是 4.3。在显示页面上，您有对象的名称、描述、联系方式、图像等……然后您可以看到以星级表示的平均评分。在对象的模型中，您存储每个用户的评分，并使用简单的数学公式计算平均值。但是我很好奇的是他们怎么表示4.3也就是4星比4.5少一点呢？存了50张png图片是不是太多了？提前致谢。

Answer 1

其实比看起来要简单得多。想象一下，两个元素相互堆叠:

1. 一排金星
2. 一排灰色星星

然后，使用一个简单的图像 mask ，您可以在 js 中计算 golden star 层的相对宽度。

更详细地说，他们实际上使用 Sprite 作为基础:

调整宽度值，您会看到完整的效果:

document.querySelector(".one .gold").style.width = "83.5%";
document.querySelector(".two .gold").style.width = "56%";

div{position:relative;height:12px;margin-bottom:10px;width: 140px;
    background:url('http://ia.media-imdb.com/images/G/01/imdb/images/rating/rating-list/sprite-1445387679._V_.png')0 -28px;
}

span{
  position: absolute;
  top: 0;
  left: 0;
  height: 12px;
  background-image: url('http://ia.media-imdb.com/images/G/01/imdb/images/rating/rating-list/sprite-1445387679._V_.png');
}

.gold{background-position: 0 -42px;}

<div class="one">
  <span class="gold"></span>
</div>

<div class="two">
  <span class="gold"></span>
</div>