最近一段時間，買了一臺云服務器，申請了一個域名，開發了一個網站，名曰哆啦日記，只為記錄生活的點點滴滴，做一個為大家記錄生活的平臺。雖然像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代碼并返回。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。