不归零码位填充技术
在这个简短的教程中,我们将介绍一种使用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范围内。
因此,既然我们有了评级,我们将执行以下操作:
- 我们遍历
ratings
对象。 请注意,每个对象键的名称都与表行的类名称匹配。 这样,我们可以将对象键链接到酒店。 - 对于每个对象键,我们获取其值并将其转换为百分比值。
- 我们将上述值四舍五入到最接近的10。这意味着结果值将为0%,10%,20%,30%等。这很重要,因为它允许我们创建整洁的半颗星。 例如,值为50%表示填充了两个半星。
- 我们将目标
.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。
结论
在这个简短的教程中,我们介绍了一种填充星级的方法。 希望您乐于为最终结果而努力–您甚至可以在即将到来的项目中利用此技术,或者根据自己的需要对其进行改进。
与往常一样,如果您有任何问题,请在下面的评论中与我们分享!
不归零码位填充技术