编程夜未眠

有志者,事竟成,破釜沉舟,百二秦关终属楚;苦心人,天不负,卧薪尝胆,千三越甲可吞吴....

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>

 

 

阅读更多
个人分类: 其他文章
想对作者说点什么? 我来说一句

JavaScript制作趣味计数器

zgqtxwd zgqtxwd

2008-05-01 06:28:00

阅读数:136

PHP一个简单的博客

2013年06月01日 474KB 下载

asp.net与C#做的个人博客

2011年12月27日 8.72MB 下载

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭