html - CSS 部分填充的星星和间距

Question

我使用 HTML 和 CSS 根据百分比显示星级。我正在尝试使该百分比与填充星星的百分比相匹配。

我已经接近了，但是当我添加“字母间距”和“填充左”CSS 以使其在我的网页上看起来更好时，填充区域的百分比发生了变化。

这是我的 HTML 和 CSS:

.score {
  margin-bottom: 5px;
  display: inline-block;
  font-size: 40px;
  color: #ccc;
  position: relative;
  text-shadow: 0px 0px 4px #FFF;
}

.score::before,
.score span::before {
  content: "✰✰✰✰✰";
  display: block;
}

.score span {
  color: #E6DB74;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.scorePadded {
  margin-bottom: 5px;
  display: inline-block;
  font-size: 40px;
  color: #ccc;
  position: relative;
  text-shadow: 0px 0px 4px #FFF;
  letter-spacing: 20px;
  padding-left: 5px;
}

.scorePadded::before,
.scorePadded span::before {
  content: "✰✰✰✰✰";
  display: block;
}

.scorePadded span {
  color: #E6DB74;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  padding-left: 5px;
}

body {
  background: black;
}

<div>
  <span class="score"><span style="width: 68.0%"></span></span>
</div>
<div>
  <span class="scorePadded"><span style="width: 68.0%"></span></span>
</div>

我想让底部的星星(有间距)填充到与顶部的星星相同的百分比(我相信正确显示 68% 的填充)，但间距不允许这样做。

Answer 1

差距使这比简单的百分比更复杂。我不相信有一个 CSS 解决方案可以解决这些差距，因此填充会明确应用于星星本身。

也就是说，通过一些数学知识，您可以使用公式应用正确的宽度。

在我看来，您需要将评分乘以星星的宽度。这告诉我们要填充多少，以像素为单位。例如，rating * starWidth，其中 rating 超出了 5。

然后您需要为每个间隙添加。分数跨越的差距量可以表示为 Math.floor(rating)。要获得以像素为单位的宽度，它是 Math.floor(rating) * gapSize。这是我们必须添加多少像素来解决较大的间隙，确保当我们到达一个时，我们开始填充下一颗星而不是它们之间的间隙。

通过添加填充宽度和间隙宽度，您可以得到:

totalWidthInPixels = (rating * starWidth) + (gaps * gapSize);

看到你提到你正在使用 Jekyll 计算这个百分比，而我对 Jekyll 一无所知，我会让你填写那部分。

公式的演示如下所示。

const span1 = document.getElementById("score");
const span2 = document.getElementById("scorePadded");

const rating = parseFloat(prompt("Enter rating between 0-5"));
const starWidth = span1.offsetWidth / 5.0;
const gapSize = (span2.offsetWidth - span1.offsetWidth - 5) / 5.0;
const gaps = Math.floor(rating);

const width = (rating * starWidth) + (gaps * gapSize);

span1.style.width = `${(rating/5) * 100}%`;
span2.style.width = `${width}px`;

console.log("star width: ", starWidth);
console.log("gap size: ", gapSize);
console.log("fill width: ", width);

.score {
  margin-bottom: 5px;
  display: inline-block;
  font-size: 40px;
  color: #ccc;
  position: relative;
  text-shadow: 0px 0px 4px #FFF;
}

.score::before,
.score span::before {
  content: "✰✰✰✰✰";
  display: block;
}

.score span {
  color: #E6DB74;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.scorePadded {
  margin-bottom: 5px;
  display: inline-block;
  font-size: 40px;
  color: #ccc;
  position: relative;
  text-shadow: 0px 0px 4px #FFF;
  letter-spacing: 20px;
  padding-left: 5px;
}

.scorePadded::before,
.scorePadded span::before {
  content: "✰✰✰✰✰";
  display: block;
}

.scorePadded span {
  color: #E6DB74;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  padding-left: 5px;
}

body {
  background: black;
}

<div>
  <span class="score"><span id="score"></span></span>
</div>
<div>
  <span class="scorePadded"><span id="scorePadded"></span></span>
</div>