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

原创 2006年06月26日 13:33:00

 

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

 

 

相关文章推荐

(Javascript)prototype的一个优势也是缺点 选择自 coofucoo 的 Blog

  如何在Javascript实现OO编程?恐怕最好的方式就是充分利用prototype属性。关于prototype的介绍有很多,我就不赘述了。比较基本的原理是,当你用prototype编写一个类后...

【unity3d教程】利用UILabel和UIButton做一个计数器

首先 我们要双击导入需要的NGUI包 以下是导入的提示 ,需要我们把这里全部导入 导入NGUI后的工程文件 导入NGUI 后 , 在上边的菜单栏就会出现NGUI的选项 ,先将默认的...

BLOG一个个人网站

  • 2010年12月24日 22:02
  • 4.12MB
  • 下载

用C# .net写的一个BLOG

  • 2009年04月05日 09:58
  • 6.42MB
  • 下载

构造函数的继承(转自http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html)

主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例。 今天要介绍的是,对象之间的"继承"的五种方法。 比如,现在有一个"动物"对象的构造函数。   function...

一个用java写的blog网站

  • 2009年07月06日 21:43
  • 424KB
  • 下载

SharePoint 2013 用JavaScript 操作 blog相关列表

本文讲述如何用JavaScript 操作  SharePoint 2013 中blog相关列表。 包括:发贴,读取贴子列表,Like/Unlike 帖子,回复帖子,读取某个帖子的所有回贴。 发贴:...

自己做的一个blog

  • 2012年04月09日 09:13
  • 1.18MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:BLOG技巧:用Javascript为你的Blog做一个计数器
举报原因:
原因补充:

(最多只允许输入30个字)