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