不归零码位填充技术_一种用于填充星级的简单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

不归零码位填充技术

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值