Laravel星級評分超贊的字體

Question

我正在檢索擊球手的平均評分，並且當前將其顯示為5中的數字。我想用字體超贊的星星替換平均評分的數字，因此，如果其4.63 / 5則顯示4.63字體超贊的星星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> 

Answer 2

我在需要時使用此jquery庫添加星級評分系統。

1. 來源：我將jquery和樣式包含在局部視圖中，該視圖僅添加到具有star系統的頁面中。

   <script src="{{ asset('/vendor/Simple-jQuery-Star-Rating-System-For-Bootstrap-3/js/star-rating.js') }}" type="text/javascript"></script> <link href="{{ asset('vendor/Simple-jQuery-Star-Rating-System-For-Bootstrap-3/css/star-rating.css')}}" media="all" rel="stylesheet" type="text/css" />

2. 表單項：然后，我使用

   <div class="form-group"> <label for="text" class="col-sm-2 control-label">Rating:</label> <input name='rate' id="input-2c" class="rating" min="0" max="5" step="0.5" data-size="sm" data-symbol="&#xf005;" data-glyphicon="false" data-rating-class="rating-fa"> </div>

要設置默認值或顯示現有值，只需將value =“”屬性添加到輸入中。 其余的工作由插件完成。