BLOG技巧:用Javascript為你的Blog做一個計數器

 

        以前CSDN BLOG沒有計數的功能,所以一直都是用的別人的計數器,但是這樣很不準確. 現在CSDN BLOG已經有計數器的功能了,於是我用Javascript + DIV做了個計數器

       

      基本原理: getElementsByTagName函數取得頁面中的訪問的數字,然後轉換成圖片

     研究一下html代碼

<h1>Blog統計</h1>
<ul class="list">
 <li class="listitem">原創 - 75 </li>
 <li class="listitem">翻譯 - 0</li>
 <li class="listitem">轉貼 - 5</li>
 <li class="listitem">點擊 - 351278</li>
 <li class="listitem">評論 - 891</li>
 <li class="listitem">Trackbacks -41</li>
</ul>

 

我這裡是用的li標籤,你的可能不一樣,但是原理都是一樣的

     增加一個div,用於顯示計數器

<p><b>訪問統計</b></p><div id=counter></div>

 

 

  JavaScript代碼

 <SCRIPT language=javascript>

       var obj = document.getElementsByTagName('li');

       var cnt,i;

       var str,html='';

       for (cnt=0;cnt<obj.length;cnt++)

       {

              str = obj[cnt].innerHTML;

             

              if (str.indexOf('點擊') != -1)

              {

                     str = str.substr(5);

                     html = "<table border='0'><tr><td bgcolor='#000000'>";

                     for (i=0; i<str.length; i++)

                            if (str.substr(i,1) >= '0' && str.substr(i,1) <= '9')

                                   html += "<img src='http://p.blog.csdn.net/images/p_blog_csdn_net/shaohui/60135/t_num_" + str.substr(i,1) + ".gif' border='0' width='20'>";

                     html += "</td></tr></table>";

                     document.all['counter'].innerHTML = html;

                     break;

              }

       }           

</SCRIPT>

 這是我的計數器的

 

     補充一下，以上代碼是針對Lighty風格的的blog寫的，所以如果你的blog不是這個風格的話即使你使用了這個代碼也是無效的。在網友的aeonspider 要求下，我稍微改動了一下代碼，針對選擇Cogitation風格的blog，用以下代碼。也可以實現計數器功能。

<p><b>訪問統計</b></p><div id=counter></div>

 

 

<SCRIPT language=javascript>

       var obj = document.getElementsByTagName('td');

       var cnt,i;

       var str,html='';

       for (cnt=0;cnt<obj.length;cnt++)

       {

              str = obj[cnt].innerHTML; 

              if (str.indexOf('次點擊') != -1)

              {

                   pos = str.indexOf('次點擊');

                   pos -= 1;

                   html = "<table border='0'><tr><td bgcolor='#000000'>";

 

              for (i=pos; i>0; i--)

                   {     

                      if (str.substr(i,1) >= '0' && str.substr(i,1) <= '9')

                          html = "<img src='http://p.blog.csdn.net/images/p_blog_csdn_net/shaohui/60135/t_num_" + str.substr(i,1) + ".gif' border='0' width='20'>" + html;

                                else

                                          break;

                   }

                     html += "</td></tr></table>";

                     document.all['counter'].innerHTML = html;

                     break;

              }

       }      

</SCRIPT>