javascript - Laravel 星级评分，字体很棒

Question

我正在检索我的击球手的平均评分，目前将其显示为数字本身(满分 5)。我想用 font Awesome 星星替换平均评分的数字，所以如果它是 4.63/5，则显示 4.63 font Awesome星数为 5 颗星，而不是我当前显示的星数。解决这个问题的最佳方法是什么？

Answer 1

例如，仅使用百分比:

<div class="star-rating" title="75%">
    <div class="back-stars">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>

        <div class="front-stars" style="width: 75%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </div>
    </div>
</div>  

星级评定样式

/*---------- star rating ----------*/
.star-rating {
    display: flex;
    align-items: center;
    font-size: 3em;
    justify-content: center;
    margin-top: 50px;
}
.back-stars {
    display: flex;
    color: #bb5252;
    position: relative;
    text-shadow: 4px 4px 10px #843a3a;
}
.front-stars {
    display: flex;
    color: #FFBC0B;
    overflow: hidden;
    position: absolute;
    text-shadow: 2px 2px 5px #d29b09;
    top: 0;
}

var frontStars = document.getElementsByClassName("front-stars")[0];
var percentage = 100 / 5 * 4.63;
frontStars.style.width = percentage + "%";

var rating = document.getElementsByClassName("star-rating")[0];
rating.title = +(4.63.toFixed(2)) + " out of " + 5;

*{margin, padding:0}
/*---------- star rating ----------*/
.star-rating {
    display: flex;
    align-items: center;
    font-size: 3em;
    justify-content: center;
    margin-top: 50px;
}
.back-stars {
    display: flex;
    color: #bb5252;
    position: relative;
    text-shadow: 4px 4px 10px #843a3a;
}
.front-stars {
    display: flex;
    color: #FFBC0B;
    overflow: hidden;
    position: absolute;
    text-shadow: 2px 2px 5px #d29b09;
    top: 0;
}

<script src="https://use.fontawesome.com/f4e64b7c17.js"></script>

<div class="star-rating">
    <div class="back-stars">
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        
        <div class="front-stars">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </div>
    </div>
</div>