css實現小數點星級評分

近做項目有個類似星級評分的功能，不過是小數點的，剛開始想的是用css的一些高級屬性，但是并沒有達到想要的效果，最終還是用普通css和js實現了個。

先來個簡易版的：

html代碼

</div>

</div>

css代碼

.box {

position: relative;

display: inline-block;

}

.star-wrap span {

float: left;

width: 16px;

height: 16px;

}

.star-wrap span:not(:last-child) {

margin-right: 4px;

}

.bottom span {

background: url(./assets/img/star.png) 0 0 no-repeat;

}

.mask span {

background: url(./assets/img/star_1.png) 0 0 no-repeat;

}

.mask {

position: absolute;

left: 0;

top: 0;

overflow: hidden;

}

其實就是兩層疊加，需要注意的是mask里需要增加個容器設置足夠大的寬度，防止寬度不夠，內容往下掉，效果如下

這里發現個問題，95%最后一個star的寬度應該占一半，但是現在只有1/3,這是因為星星之間有5像素的間距，所以還得計算星星所占的實際百分比

計算公式:

首先計算實際星星所占百分比的寬度:6 * 10 * 95%

計算間距寬度:Math.floor(196(總距離) * 95% / (16(每個星星的寬度) + 4(空格間距))) * 4

兩個距離相加就得到了實際距離了

js代碼

let w = 16 * 10 * percent + Math.floor(196 * percent / (16 + 4)) * 4

document.getElementById('mask').style.width = (w / 196).toFixed(2) * 100 + '%';

完整代碼：

<!DOCTYPE html>

<head>

<style>

.box {

position: relative;

display: inline-block;

}

.star-wrap span {

float: left;

width: 16px;

height: 16px;

}

.star-wrap span:not(:last-child) {

margin-right: 4px;

}

.bottom span {

background: url(./assets/img/star.png) 0 0 no-repeat;

}

.mask span {

background: url(./assets/img/star_1.png) 0 0 no-repeat;

}

.mask {

position: absolute;

left: 0;

top: 0;

overflow: hidden;

}

</style>

</head>

<body>

</div>

</div>

function calcWidth(percent) {

let w = 16 * 10 * percent + Math.floor(196 * percent / (16 + 4)) * 4

document.getElementById('mask').style.width = (w / 196).toFixed(2) * 100 + '%';

}

calcWidth(0.95);

</script>

</body>

</html>

/**
 * 星級評分
 * ion-star是ionic星星圖標可以自行更換
 * readonly為false指可進行評價操作，true指只能看
 * <star-rating ng-model="bo.evaluation" max-value="maxVal" on-change="startsChange" readonly='false'></star-rating>
 *
 */
m.directive('starRating',function () {
 return{
 restrict:'AE',
 template:'<ul class="star-rating">' +
 '<li ng-repeat="star in stars" ng-class="star" ng-click="starClick($index + 1)">' +
 '<i class="icon ion-star"></i>' +
 '</li>' +
 '</ul>',
 scope:{
 maxValue:'=',
 onChange:'=',
 readonly:'='
 },
 require:'ngModel',
 link:function (scope, elem, attrs, ngModel) {
 if(!(!!scope.readonly)){
 elem.css('cursor','pointer');
 }
 function reLoadStars(ratingValue) {
 scope.stars = [];
 for(var i = 0; i < scope.maxValue; i++) {
 scope.stars.push({
 //這個是選中幾星就把幾星的顏色repeat到li標簽下的ng-class樣式中
 filled: i < ratingValue
 });
 }
 };
 scope.starClick = function(val) {
 if( !!scope.readonly){
 return ;
 }else{
 ngModel.$setViewValue(val);
 reLoadStars(val);
 scope.onChange();
 }
 };
 //它是model值到view值的轉化器
 ngModel.$formatters.push(function (value) {
 if(!ngModel.$isEmpty(value)){
 reLoadStars(value);
 }
 return value;
 });
 }
 }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

面控制器必要內容:

var ratingDescs=['未評價','差','一般','好','非常好'];
 $scope.maxVal = ratingDescs.length-1;
 //一進頁面的控制器判斷條件，默認指令的ng-model初始值為0
if(!(appl.bo.evaluation && appl.bo.evaluation!='' && appl.bo.evaluation>0)){
 $scope.bo.evaluationDesc=ratingDescs[0];
 $scope.bo.evaluation=0;
 }
//評價，指令對應到頁面控制器中的方法，這是顯示評分說明，上面的初始值為0，評分說明默認顯示未‘未評價’
 $scope.startsChange = function() {
 $scope.bo.evaluationDesc=ratingDescs[$scope.bo.evaluation];
 }
1
2
3
4
5
6
7
8
9
10
11

頁面的具體代碼：

<div class="card item-padding">
<label >服務評價：</label>
<star-rating ng-model="bo.evaluation" max-value="maxVal" on-change="startsChange" readonly='true' ng-if="!doType"></star-rating>
<star-rating ng-model="bo.evaluation" max-value="maxVal" on-change="startsChange" readonly='false' ng-if="doType"></star-rating> 
<span class="calm" style="vertical-align: 3px;" ng-bind="bo.evaluationDesc"></span>
 <div class="assertive">
 說明：<i class=" stars"></i> 差 、
 <i class="icon ion-star"></i><i class="icon ion-star"></i> 一般 、
 <i class="icon ion-star"></i><i class="icon ion-star"></i><i class="icon ion-star"></i> 好 、
 <i class="icon ion-star"></i><i class="icon ion-star"></i><i class="icon ion-star"></i><i class="icon ion-star"></i> 非常好 
 </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12

CSS頁面樣式內容：

/**
 * 星級評分
 */
.star-rating {
 color: #a9a9a9;
 text-align: center;
 height: 34px;
 margin: 0;
 padding-top: 6px;
 padding-bottom: 6px;
 padding-right: 0;
 padding-left: 0;
 display: inline-block;
}
.star-rating li {
 list-style-type: none;
 display: inline-block;
 text-align: center;
 font-weight: bold;
 margin-left: 2px;
 margin-right: 2px;
}
.star-rating .filled {
 color:red;
}
.star-rating i {
 font-size: 20px;
 margin-right: 5px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

最后的效果圖：

核心原理利用遍歷nextAll()。

1、正常情況下

正常情況下

2、點擊后效果

點擊后效果

jQuery核心代碼：

$(function() {

$('span').click(function() {

$(this).siblings().each(function() {

$(this).removeClass('reds');

}