访客计数器作为网站不可缺少的部分，不仅可以记录网站被访问的次数，而且可以通过生动有趣的设计来加强网页的趣味性和可观赏性，使访客计数器成为网页上
的一个风景。下面介绍两种轻松设计趣味访客计数器的方法，希望对大家有所帮助。
一、素材准备
趣味访客计数器是将计数器的设计与趣味性的显示效果结合在一起，十种不同风格的计数器随机出现在网页上，为相对静止和严肃的网页增加一些动态的效果和趣
味。第一次访问时，计数器显示的可能是红色的静态数字，第二次访问时，计数器可能变成了不断翻转的动画形式，第三次访问时，计数器可能又变成了由虚到实
的虚幻变化形式。为了实现这种效果，首先需要准备一些基本素材，即十种显示类型的数字图像文件。可以用图形编辑工具（如Photoshop、Animator等）根据自己
的想象制作，也可以直接从网上图片库下载，然后将这些数字图像以00.gif ...09.gif...90.gif...99.gif的形式存放在一个可读取的目录中，在下面的例子中这
些图像文件存放在“http://localhost/images”中。这里gif文件命名的原则是：第1位数字代表显示类型，第2位数字代表数字值，如00.gif代表0型数字0的gif文
件，09.gif代表0型数字9的gif文件。
二、设计方法之一：利用JavaScript制作趣味计数器
1.设计思想：
该方法的关键是Cookie技术和动态图像特性的综合运用。使用Cookie，可以在用户端的硬盘上记录用户的数据，下次访问此站点时，即可读取用户端硬盘的
Cookie，直接得知来访者的身份和访问次数等有关信息。JavaScript中通过document.cookie属性访问Cookie，这个属性包括名字、失效日期、有效域名、有效
URL路径等。用等号分开的名字和其值是Cookie的实际数据，本例中用来存储该访问者访问该页面的次数。通过把Web页中的图像映射到一个images数组，一定条件
下修改该数组项的特性，可以实现动态图像显示。本例中，首先预载入一组图像，每次调用该Web页时，随机产生新的一组图像，通过覆盖原图像实现动态的趣味性效果。
2．源程序count.html：
|
以下为引用的内容：
＜ html ＞
＜ head ＞
＜ meta http-equiv="Content-Type"
content="text/html; charset=gb2312" ＞
＜ title ＞趣味计数器＜ /title ＞
＜ /head ＞
＜ body ＞
＜ p ＞＜ script language="JavaScript" ＞
var expdays=60;
var exp=new Date();
exp.setTime(exp.getTime()+
(expdays*24*60*60*1000));
function count(info){
//若是该访客的第一次访问，
将计数器值赋1，否则加1累积
var wwhcount=getcookie('wwhcount');
if (wwhcount==null){
wwhcount=1;
}
else{wwhcount++;}
setcookie('wwhcount',wwhcount,exp);
return countdisp(wwhcount)
}
function countdisp(countvar){
//实现随机显示，不足6位以0补全，
可以自己调整显示位数
var countvar1="000000"+countvar;
var howFar1=countvar1.length;
countvar1=countvar1.substring(howFar1, howFar1-1)
var index=""+Math.floor(Math.random()*10);
if (index=="10"){
index="0"};
for (var icount=0;icount＜ 6;icount++){
var g=countvar1.substring(icount,icount+1);
document.images[icount].src=http://www.yule21.com/info/"http:
//localhost/images/"+index+g+".gif";
}
}
function getCookieVal(offset){
//获取该访问者的已访问次数
var endstr=document.cookie.indexOf(";",offset);
if (endstr==-1)
endstr=document.cookie.length;
return unescape(document.cookie.substring(offset,endstr));
}
function getcookie(name){
//截取Cookie中的name信息段
var arg=name+"=";
var alen=arg.length;
var clen=document.cookie.length;
var i=0;
while (i＜ clen){
var j=i+alen;
if (document.cookie.substring(i,j)==arg)
return getCookieVal(j);
i=document.cookie.indexOf(" ",i)+1;
if (i==0) break;}
return null;
}
function setcookie(name,value){
//存储该访客计数器的数值
var argv=setcookie.arguments;
var argc=setcookie.arguments.length;
var expires=(argc ＞2)?argv[2]:null;
var path=(argc ＞3)?argv[3]:null;
var domain=(argc ＞4)?argv[4]:null;
var secure=(argc＞5)?argv[5]:false;
document.cookie=name+"="+escape(value)
+((expires==null)?"":(";expires="+expires.toGMTString()))
+((path==null)?"":(";path="+path))+((domain==null)?"
":(";domain="+domain))+((secure==true)?";secure":"");
}
function deletecookie(name){
//使该信息行失效，
删除该用户关于访问次数的信息
var exp=new Date();
exp.setTime(exp.getTime()-1);
var cval=getcookie(name);
document.cookie=name+"="+cval+"
;expires="+exp.toGMTString();
}
＜ /script ＞＜ /p ＞
＜ ! --预载入图像数组-- ＞
您是第 ＜ img src=http://www.yule21.com/info/"http://localhost/images/00.gif" height=20 width=20
＞
＜ img src=http://www.yule21.com/info/"http://localhost/images/00.gif"
height=20 width=20 ＞
＜ img src=http://www.yule21.com/info/"http://localhost/images/00.gif"
height=20 width=20 ＞
＜ img src=http://www.yule21.com/info/"http://localhost/images/00.gif"
height=20 width=20 ＞
＜ I mg src=http://www.yule21.com/info/"http://localhost/images/00.gif"
height=20 width=20 ＞
＜ img src=http://www.yule21.com/info/"http://localhost/images/00.gif"
height=20 width=20 ＞次光临！
＜ script language="JavaScript" ＞
//调用count()函数，
实现计数器的动态图像显示
count();
＜ /script ＞
＜ /body ＞
＜ /html ＞
|
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
