js 根据亲密度数据组装类似于评分星星效果

 

之前项目有需求要用到类似于评分的展示功能，所以做了个例子，虽然粗糙，但有效果，记录一下。

注：只是根据数据单纯的展示星星，不具备打分评分功能。

 

实现效果如图所示：

 

第一步： 需要三张图片

一张图片为全星，一张为半星，一张为空星，图片可以去阿里图标库搜索半星下载。

 

第二步：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放去需要展示的标签内即可。