How to make a simple counter using JavaScript_Basics

Design Thoughts

The key to this method is the comprehensive use of cookie technology and dynamic image characteristics. Using cookies, the user's data can be recorded on the user's hard drive. The next time you visit this site, you can read the cookie on the user's hard drive and directly learn the visitor's identity, number of visits, and other relevant information. Cookies are accessed in JavaScript through the document.cookie attribute, which includes name, expiration date, valid domain name, valid URL path, etc. The name and its value separated by an equal sign are the actual data of the cookie, which in this case is used to store the number of times the visitor visited the page. By mapping the images in the Web page to an Images array and modifying the characteristics of the array items under certain conditions, dynamic image display can be achieved. In this example, a set of images is first preloaded. Each time the Web page is called, a new set of images is randomly generated, and a dynamic and interesting effect is achieved by overwriting the original images.

Source program 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)&#63;argv[2]:null;var path=(argc>3)&#63;argv[3]:null;

　　var domain=(argc>4)&#63;argv[4]:null;

　　var secure=(argc〉5)&#63;argv[5]:false;

　　document.cookie=name＋″=″＋escape(value)

　　＋((expires==null)&#63;″ ″:(″;expires=″＋expires.toGMTString()))

　　＋((path==null)&#63;″ ″:(″;path=″＋path))＋((domain==null)&#63;″

　　″:(″;domain=″＋domain))＋((secure==true)&#63;″;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>

Things to note

Since the JavaScript language is used, this method is independent of the application platform and can be applied to Unix, Windows and other platforms. In addition, this counter is different from the general visitor counter and is specifically used to record the number of times a visitor visits a certain website.