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

柔情只为你懂 2023-06-22 13:53 5阅读 0赞

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

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

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

目前规则就是级别最高是皇冠，皇冠数量不限，但其他的如果达到四个以后就会被向上升一级。其实在我的设计中，这个跨度不一定是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代码并返回。

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

[Link 1]: http://www.duola.vip/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191216172727137.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3,size_16,color_FFFFFF,t_70