不归零码位填充技术_一种用于填充星级的简单JavaScript技术

不归零码位填充技术

在这个简短的教程中，我们将介绍一种使用HTML，CSS和JavaScript填充星级的简单但有用的方法。 这是我们要构建的：

抢星图标

对于我们的示例，我们需要以下两个星形图标：

考虑到这一点，让我们首先在项目中包含流行的Font Awesome库：

标记

关于标记，我们需要一个六行的表。 第一行包含表格标题th ，而其他五行包含酒店详细信息。 显然，在您自己的项目中，这些行可能表示不同的内容。

这是必需HTML：

<table>
 <thead>
    <tr>
      <th>Hotel</th>
      <th>Rating</th>
    </tr>
  </thead>
  <tbody>
    <tr class="hotel_a">
      <td>Hotel A</td>
      <td>
        <div class="stars-outer">
          <div class="stars-inner"></div>
        </div>
      </td>
    </tr>
    <tr class="hotel_b">
      <td>Hotel B</td>
      <td>
        <div class="stars-outer">
          <div class="stars-inner"></div>
        </div>
      </td>
    </tr>

    <!-- 3 more rows here -->
    
  </tbody>
</table>

最重要的是，请注意每行第二个td中包含的标记：

<div class="stars-outer"
  <div class="stars-inner"></div>
</div>

这是我们必须样式化的标记，以可视化酒店的星级。

到目前为止，我们的项目如下所示：

CSS

现在，让我们向表中添加一些基本CSS，如下所示：

table {
  margin: 0 auto;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid #d4d4d4;
  font-size: 20px;
  background: #fff;
}

table th, 
table tr:nth-child(2n+2) {
  background: #e7e7e7;
}
 
table th, 
table td {
  padding: 20px 50px;
}
 
table th {
  border-bottom: 1px solid #d4d4d4;
}

下一步也是最重要的一步是定义.stars-outer和.stars-inner元素的样式。 这是必要CSS：

.stars-outer {
  display: inline-block;
  position: relative;
  font-family: FontAwesome;
}

.stars-outer::before {
  content: "\f006 \f006 \f006 \f006 \f006";
}

.stars-inner {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
}

.stars-inner::before {
  content: "\f005 \f005 \f005 \f005 \f005";
  color: #f8ce0b;
}

现在让我们来看一些事情。

我们通过CSS加载所需的Font Awesome图标。 这是一个两步过程。 首先，我们将font-family: FontAwesome应用于顶部父元素（即.stars-outer ）。 接下来，我们通过设置图标的unicode字符将图标添加到目标伪元素。

这是第一个图标的unicode：

这是第二个代码的unicode：

还要注意的另一件事是，我们的每个图标应在表格行中出现五次。 因此，我们将它们布置如下：

.stars-outer::before {
  content: "\f006 \f006 \f006 \f006 \f006";
}

.stars-inner::before {
  content: "\f005 \f005 \f005 \f005 \f005";
}

放置好CSS后，该项目如下所示：

空星

您会注意到只有第一个图标出现。 但为什么？ 这是因为我们早先定义了以下CSS规则：

.stars-inner {
  width: 0;
}

通过删除该规则，第二个图标将出现在第一个图标的顶部，如下所示：

而且，如果.stars-inner元素的.stars-inner 50％，我们将展示其中的一半：

无论如何， .stars-inner元素的width最初应为0 ，我们将根据相关酒店的评分值动态更新它。 在下一节中，我们将了解情况如何。

JavaScript

假设我们的酒店具有以下评分值：

const ratings = {
  hotel_a : 2.8,
  hotel_b : 3.3,
  hotel_c : 1.9,
  hotel_d : 4.3,
  hotel_e : 4.74
};

请记住，为简单起见，我们指定了上述硬编码值（0到5之间）。 但是，在实际项目中，可以通过AJAX请求来检索这些内容。 另外，在现实世界中，我们应该做一些检查以确保派生值在0-5范围内。

因此，既然我们有了评级，我们将执行以下操作：

1. 我们遍历ratings对象。 请注意，每个对象键的名称都与表行的类名称匹配。 这样，我们可以将对象键链接到酒店。
2. 对于每个对象键，我们获取其值并将其转换为百分比值。
3. 我们将上述值四舍五入到最接近的10。这意味着结果值将为0％，10％，20％，30％等。这很重要，因为它允许我们创建整洁的半颗星。 例如，值为50％表示填充了两个半星。
4. 我们将目标.stars-inner元素的width设置为等于四舍五入的值。

根据上述内容，以下是相关代码：

const starTotal = 5;

for(const rating in ratings) {  
  // 2
  const starPercentage = (ratings[rating] / starTotal) * 100;
  // 3
  const starPercentageRounded = `${(Math.round(starPercentage / 10) * 10)}%`;
  // 4
  document.querySelector(`.${rating} .stars-inner`).style.width = starPercentageRounded; 
}

我们项目的最终版本如下：

浏览器支持

该演示已在各种设备上进行了测试，并且运行良好。 但是，如果您遇到任何问题，请在下面的评论中告诉我。 此外，您可能已经注意到，我们使用Babel将我们的ES6代码编译为ES5。

结论

在这个简短的教程中，我们介绍了一种填充星级的方法。 希望您乐于为最终结果而努力–您甚至可以在即将到来的项目中利用此技术，或者根据自己的需要对其进行改进。

与往常一样，如果您有任何问题，请在下面的评论中与我们分享！

翻译自: https://webdesign.tutsplus.com/tutorials/a-simple-javascript-technique-for-filling-star-ratings--cms-29450

不归零码位填充技术