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

我在需要时使用this jquery library添加星级评分系统。

来源：我在部分视图中包含jquery和样式，我只添加到星系统的页面。

<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" />
表单项然后我使用
将其添加到我的页面
<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="" data-glyphicon="false" data-rating-class="rating-fa"> </div>

要设置默认值或显示现有值，只需将value =“”属性添加到输入中即可。该插件完成剩下的工作。

Laravel星级评级字体很棒

2 个答案: