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>

 这是我的计数器的效果图