最近一段時(shí)間，買了一臺(tái)云服務(wù)器，申請(qǐng)了一個(gè)域名，開發(fā)了一個(gè)網(wǎng)站，名曰哆啦日記，只為記錄生活的點(diǎn)點(diǎn)滴滴，做一個(gè)為大家記錄生活的平臺(tái)。雖然像QQ、微信、、、甚至soul、、、、這些有很多都可以記錄，但我還是想著做一個(gè)自己的網(wǎng)站。

昨天突然就想到了為網(wǎng)站加上一個(gè)類似QQ等級(jí)的功能，因?yàn)橹熬鸵恢睂?duì)QQ等級(jí)很感興趣，也一直在努力提升QQ等級(jí)(雖然現(xiàn)在已經(jīng)達(dá)到皇冠以上不再關(guān)心了)，覺得這個(gè)功能很有意思。

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

目前規(guī)則就是級(jí)別最高是皇冠，皇冠數(shù)量不限，但其他的如果達(dá)到四個(gè)以后就會(huì)被向上升一級(jí)。其實(shí)在我的設(shè)計(jì)中，這個(gè)跨度不一定是4，而是一個(gè)變量，這個(gè)變量定為幾都可以，設(shè)計(jì)的比較靈活，下面就說(shuō)一下如何用js實(shí)現(xiàn)這個(gè)算法吧。主要就是根據(jù)天數(shù)來(lái)計(jì)算出對(duì)應(yīng)的圖標(biāo)的數(shù)量。

if(num==0){text="未寫過(guò)日記呢";}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天，顯示太陽(yáng)、月亮和星星、例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級(jí)就顯示一個(gè)皇冠、63級(jí)就顯示三個(gè)太陽(yáng)三個(gè)月亮三個(gè)星星(一共顯示9個(gè)圖標(biāo))，由于某些情況下顯示的圖標(biāo)太多不美觀，所以便采用了沒被注釋的寫法：如果對(duì)應(yīng)圖標(biāo)數(shù)量不為零則顯示該圖標(biāo)及對(duì)應(yīng)的數(shù)量，也就和上文圖中一樣了。

對(duì)于被注釋掉的內(nèi)容所調(diào)用的函數(shù)，這里我也做一下羅列，需要的可以借鑒：

/*** 根據(jù)數(shù)量和類型返回對(duì)應(yīng)HTML* @param num 4個(gè)* @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; }

這個(gè)函數(shù)的功能就是根據(jù)圖標(biāo)數(shù)量和圖標(biāo)類型來(lái)獲取對(duì)應(yīng)的HTML代碼并返回。

具體的算法代碼都已經(jīng)羅列了，具體也不做分析了，相信聰明的你一看就懂了，如果有不懂的地方可以留言提問(wèn)。文末附上本人的哆啦日記網(wǎng)，歡迎你的加入，細(xì)細(xì)的使用一番，你會(huì)發(fā)現(xiàn)它很實(shí)用，也會(huì)很有趣。

總結(jié)

以上是生活随笔為你收集整理的聊一聊丘丘等级及其图标显示的实现算法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。