之前项目有需求要用到类似于评分的展示功能,所以做了个例子,虽然粗糙,但有效果,记录一下。
注:只是根据数据单纯的展示星星,不具备打分评分功能。
实现效果如图所示:
第一步: 需要三张图片
一张图片为全星,一张为半星,一张为空星,图片可以去阿里图标库搜索半星下载。
第二步:js的实现部分
// 定义星星图片url
var startAll = '<img style="padding-bottom: 4px;" src= "文件夹路径/startAll.png"/>';
var startPart = '<img style="padding-bottom: 4px;" src= "文件夹路径/startPart.png"/>';
var startnull = '<img style="padding-bottom: 4px;" src= "文件夹路径/startnull.png"/>';
// 获取亲密度:
比如 var num = "0.88"
// 因为效果是5个星,所以除以2,并获取一位小数点。
var degree = (num * 10 / 2).toFixed(1);
// 获取组装好的图片路径
var startHtml = addStart(degree);
// ....剩下的就是展示逻辑,不展开说明
// js 的星星方法
// 思路就是:
// 1.先定义星星数量startNum = 5,
// 2. parseInt组装满星
// 3.判断小数点后一位是否为0,不为0则装一个半星
// 4.然后组装剩余的星星
function addStart(degreeNum) {
var startHtml = '';
var startNum = 5; // 设置星星个数为5个
var degree = parseInt(degreeNum); // 亲密度全满的星星个数
// 循环满的星星
for (var i = 0; i < degree; i++) {
startHtml += startAll;
startNum--;
}
// 切割传过来的小数
var splitDegree = degreeNum.split(".");
// 判断小数点后面的是否为0,不为零则加半星
if (splitDegree[1] != 0){
startHtml += startPart;
startNum--
}
// 组装空星星
for (var k = 0; k < startNum ; k++) {
startHtml += startnull;
}
return startHtml;
}
综上所述,只要3张图片,亲密度数据,以及组装的加星的方法,即可组装成星星的html,剩下的只需要把这个startHtml放去需要展示的标签内即可。