关闭

BLOG技巧:用Javascript为你的Blog做一个计数器

标签: blogjavascripthtmlclassbordertable
31554人阅读 评论(21) 收藏 举报
分类:

 

        以前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>

 

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1962930次
    • 积分:15273
    • 等级:
    • 排名:第755名
    • 原创:126篇
    • 转载:11篇
    • 译文:1篇
    • 评论:1383条
    最新评论