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

 

发布了7 篇原创文章 · 获赞 5 · 访问量 5998
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览