BLOG技巧:用Javascript为你的Blog做一个计数器
2006-06-26 13:33
330 查看
以前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>
相关文章推荐
- BLOG技巧:用Javascript为你的Blog做一个计数器
- 一个JavaScript上的OOP编程技巧:继承
- 使用JavaScript制作一个简单的计数器的方法
- 为你自己的blog申请免费计数器
- javascript 遍历一个对象object 有时会用到(转自:http://blog.csdn.net/peng_wu01/article/details/5569247)
- 给你的Blog添加一个访问计数器
- 给自己的Blog添加一个访问计数器!
- [转载]给你的Blog添加一个访问计数器
- Blog技巧, 用JavaScript解决图像不能正常显示问题
- Javascript 技巧大全http://www.playes.net/Blog/450.asp
- 为自己的Blog加了一个计数器
- 今天给加上一个计数器,看到自己的Blog都生锈了啊!以后要好好维护!
- 用Javascript制作一个可自动填写的文本框(一) 选择自 yjgx007 的 Blog
- (Javascript)prototype的一个优势也是缺点 选择自 coofucoo 的 Blog
- JavaScript合并两个Json对象属性为一个对象
- Javascript中最常用的55个经典技巧
- JS学习笔记1——不要使用JavaScript内置的parseInt()和Number()函数,利用map和reduce操作实现一个string2int()函数
- 转一个无聊的爱情故事:如果有个女生为你哭
- JavaScript创意游戏:请画一个小人-网址
- 给自己的BLOG添加计数器