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');

}