聊一聊丘丘等级及其图标显示的实现算法

最近一段时间，买了一台云服务器，申请了一个域名，开发了一个网站，名曰哆啦日记，只为记录生活的点点滴滴，做一个为大家记录生活的平台。虽然像QQ、微信、、、甚至soul、、、、这些有很多都可以记录，但我还是想着做一个自己的网站。

昨天突然就想到了为网站加上一个类似QQ等级的功能，因为之前就一直对QQ等级很感兴趣，也一直在努力提升QQ等级(虽然现在已经达到皇冠以上不再关心了)，觉得这个功能很有意思。

我做的是要把用户写日记的天数用星星、月亮、太阳、皇冠来表示，而不是单纯的显示写多少天日记。(本来是想用连续写日记的天数，但一来是还没有想到思路，二来是连续写会很容易被清零，达不到吸引用户更新的效果，然后就想着把这个需求待定，等以后在做)如下图所示：

目前规则就是级别最高是皇冠，皇冠数量不限，但其他的如果达到四个以后就会被向上升一级。其实在我的设计中，这个跨度不一定是4，而是一个变量，这个变量定为几都可以，设计的比较灵活，下面就说一下如何用js实现这个算法吧。主要就是根据天数来计算出对应的图标的数量。

if(num==0){
				text="未写过日记呢";
			}else{
				if(num/n<=1){//少于4天，显示星星
//					text=getHtml(num,"star");
					text=""+num;
				}else{
					if(num/(n*n)<=1){//小于16天，显示月亮和星星
//						text=getHtml(parseInt(num/n),"moon")+getHtml(num%n,"star");
						text=""+parseInt(num/n);
						if(num%n>0){
							text=text+""+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=""+parseInt(num/(n*n));
							if(parseInt((num%(n*n))/n)>0){
								text=text+""+parseInt((num%(n*n))/n);
							}
							if((num%(n*n))%n>0){
								text=text+""+(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=""+parseInt(num/(n*n*n));
							if(parseInt((num%(n*n*n))/(n*n))>0){
								text=text+""+parseInt((num%(n*n*n))/(n*n));
							}
							if(parseInt(((num%(n*n*n))%(n*n))/n)>0){
								text=text+""+parseInt(((num%(n*n*n))%(n*n))/n);
							}
							if(((num%(n*n*n))%(n*n))%n>0){
								text=text+""+((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";
	}
	return text;
}

这个函数的功能就是根据图标数量和图标类型来获取对应的HTML代码并返回。

具体的算法代码都已经罗列了，具体也不做分析了，相信聪明的你一看就懂了，如果有不懂的地方可以留言提问。文末附上本人的哆啦日记网，欢迎你的加入，细细的使用一番，你会发现它很实用，也会很有趣。