最近一段时间，买了一台云服务器，申请了一个域名，开发了一个网站，名曰哆啦日记，只为记录生活的点点滴滴，做一个为大家记录生活的平台。虽然像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代码并返回。
具体的算法代码都已经罗列了，具体也不做分析了，相信聪明的你一看就懂了，如果有不懂的地方可以留言提问。文末附上本人的哆啦日记网，欢迎你的加入，细细的使用一番，你会发现它很实用，也会很有趣。
