当前位置:首页 > 开发教程 > js/jQuery教程 >

用JS制作趣味计数器

时间:2013-09-18 09:53 来源: 作者: 收藏

2345软件教程,为您打造全面的软件教程手册,无论是新奇小软件的操作还是专业软件的使用技巧,2345软件教程都会为您解疑释惑。

核心提示:首先预载入一组图像,每次调用该Web页时,随机产生新的一组图像,通过覆盖原图像实现动态的趣味性效果。

设计思想

 

该方法的关键是Cookie技术和动态图像特性的综合运用。使用Cookie,可以在用户端的硬盘上记录用户的数据,下次访问此站点时,即可读取用户端硬盘的Cookie,直接得知来访者的身份和访问次数等有关信息。JavaScript中通过document.cookie属性访问Cookie,这个属性包括名字、失效日期、有效域名、有效URL路径等。用等号分开的名字和其值是Cook

ie的实际数据,本例中用来存储该访问者访问该页面的次数。通过把Web页中的图像映射到一个Images数组,一定条件下修改该数组项的特性,可以实现动态图像显示。本例中,首先预载入一组图像,每次调用该Web页时,随机产生新的一组图像,通过覆盖原图像实现动态的趣味性效果。

 

源程序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:

//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://localhost/images/00.gif″ height=20 width=20>

< img src=″http://localhost/images/00.gif″

height=20 width=20>

< img src=″http://localhost/images/00.gif″

height=20 width=20>

< img src=″http://localhost/images/00.gif″

height=20 width=20>

< I mg src=″http://localhost/images/00.gif″

height=20 width=20>

< img src=″http://localhost/images/00.gif″

height=20 width=20>次光临!

< script language=″JavaScript″>

//调用count()函数,实现计数器的动态图像显示

count();

< /script>

< /body>

< /html>


注意事项

 

由于使用了JavaScript语言,因此该方法具有与应用平台的无关性,可以适用于Unix、Windows等多种平台。另外,此计数器不同于一般意义上的访客计数器,专门用于记录某一访客对某一网站的访问次数。


js/jQuery教程阅读排行

最新文章