Laravel的星级评级，字体很棒
我正在检索我的击球手的平均评分，并将其显示为满分5分的数字。我想用字体牛星来代替平均评分的数字，所以如果它是4.63/5，那么在5分中显示4.63个字体牛星而不是我现在显示的数字。做这件事最好的方法是什么？
回答 2
Stack Overflow用户
发布于 2018-02-03 06:59:57
例如，仅使用百分比：
<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>
Stack Overflow用户
发布于 2018-02-03 09:39:31
在需要的时候，我会使用this jquery library添加一个星级系统。
我在部分视图中包含了
- The和样式，我只将它们添加到使用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" />
- Form项：，然后我使用
<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="“属性。插件完成了剩下的工作。
https://stackoverflow.com/questions/48591873
复制相似问题
腾讯云开发者
