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放去需要展示的標籤內即可。