聊一聊丘丘等級及其圖標顯示的實現算法

最近一段時間，買了一臺雲服務器，申請了一個域名，開發了一個網站，名曰哆啦日記，只爲記錄生活的點點滴滴，做一個爲大家記錄生活的平臺。雖然像QQ、微信、、、甚至soul、、、、這些有很多都可以記錄，但我還是想着做一個自己的網站。

昨天突然就想到了爲網站加上一個類似QQ等級的功能，因爲之前就一直對QQ等級很感興趣，也一直在努力提升QQ等級(雖然現在已經達到皇冠以上不再關心了)，覺得這個功能很有意思。

我做的是要把用戶寫日記的天數用星星、月亮、太陽、皇冠來表示，而不是單純的顯示寫多少天日記。(本來是想用連續寫日記的天數，但一來是還沒有想到思路，二來是連續寫會很容易被清零，達不到吸引用戶更新的效果，然後就想着把這個需求待定，等以後在做)如下圖所示：

目前規則就是級別最高是皇冠，皇冠數量不限，但其他的如果達到四個以後就會被向上升一級。其實在我的設計中，這個跨度不一定是4，而是一個變量，這個變量定爲幾都可以，設計的比較靈活，下面就說一下如何用js實現這個算法吧。主要就是根據天數來計算出對應的圖標的數量。

if(num==0){
				text="未寫過日記呢";
			}else{
				if(num/n<=1){//少於4天，顯示星星
//					text=getHtml(num,"star");
					text="<img src='image/star.png' style='width:16px;height:16px'>"+num;
				}else{
					if(num/(n*n)<=1){//小於16天，顯示月亮和星星
//						text=getHtml(parseInt(num/n),"moon")+getHtml(num%n,"star");
						text="<img src='image/moon.png' style='width:16px;height:16px'>"+parseInt(num/n);
						if(num%n>0){
							text=text+"<img src='image/star.png' style='width:16px;height:16px'>"+num%n;
						}
					}else{
						if(num/(n*n*n)<=1){//小於64天，顯示太陽、月亮和星星、例17
//							text=getHtml(parseInt(num/(n*n)),"sun")+getHtml(parseInt((num%(n*n))/n),"moon")+getHtml((num%(n*n))%n,"star");
							text="<img src='image/sun.png' style='width:16px;height:16px'>"+parseInt(num/(n*n));
							if(parseInt((num%(n*n))/n)>0){
								text=text+"<img src='image/moon.png' style='width:16px;height:16px'>"+parseInt((num%(n*n))/n);
							}
							if((num%(n*n))%n>0){
								text=text+"<img src='image/star.png' style='width:16px;height:16px'>"+(num%(n*n))%n;
							}
						}else{
//							text=getHtml(parseInt(num/(n*n*n)),"crown")+getHtml(parseInt((num%(n*n*n))/(n*n)),"sun")+getHtml(parseInt(((num%(n*n*n))%(n*n))/n),"moon")+getHtml(((num%(n*n*n))%(n*n))%n,"star");
							text="<img src='image/crown.png' style='width:16px;height:16px'>"+parseInt(num/(n*n*n));
							if(parseInt((num%(n*n*n))/(n*n))>0){
								text=text+"<img src='image/sun.png' style='width:16px;height:16px'>"+parseInt((num%(n*n*n))/(n*n));
							}
							if(parseInt(((num%(n*n*n))%(n*n))/n)>0){
								text=text+"<img src='image/moon.png' style='width:16px;height:16px'>"+parseInt(((num%(n*n*n))%(n*n))/n);
							}
							if(((num%(n*n*n))%(n*n))%n>0){
								text=text+"<img src='image/star.png' style='width:16px;height:16px'>"+((num%(n*n*n))%(n*n))%n;
							}
						}
					}
				}
			}

這裏面被註釋掉的是另一種顯示方法，這種顯示方法與QQ相同，比如64級就顯示一個皇冠、63級就顯示三個太陽三個月亮三個星星(一共顯示9個圖標)，由於某些情況下顯示的圖標太多不美觀，所以便採用了沒被註釋的寫法：如果對應圖標數量不爲零則顯示該圖標及對應的數量，也就和上文圖中一樣了。

對於被註釋掉的內容所調用的函數，這裏我也做一下羅列，需要的可以借鑑：

/**
 * 根據數量和類型返回對應HTML
 * @param num	4個
 * @param type  星星
 * @returns {String}
 */
function getHtml(num,type){
	num=parseInt(num);
	var text="";
	for(var i=0;i<num;i++){
		text=text+"<img src='image/"+type+".png' style='width:16px;height:16px'>";
	}
	return text;
}

這個函數的功能就是根據圖標數量和圖標類型來獲取對應的HTML代碼並返回。

具體的算法代碼都已經羅列了，具體也不做分析了，相信聰明的你一看就懂了，如果有不懂的地方可以留言提問。文末附上本人的哆啦日記網，歡迎你的加入，細細的使用一番，你會發現它很實用，也會很有趣。