BLOG技巧:用Javascript为你的Blog做一个计数器
基本原理: 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>
这是我的计数器的效果图