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='https://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='https://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>