Counter | design Zhang Lui (Yantai University Library, 264005)
----------------------------------------------------------------------
----------
----Visitors counter as an indispensable part of the site, not only can record the number of visits to the site, but also
In order to enhance the fun and ornamental of the webpage through the vivid and interesting design, make the visitor counter become a
A landscape. Here are two ways to easily design a fun visitor counter, and hope to help.
First, material preparation
----Interesting visitor counter is to combine the counter design with the interesting display effect, 10 different kinds of wind
Grid counters appear randomly on the web page, adding some dynamic effects and interesting to the relatively static and serious pages
Taste. On the first visit, the counter may display a red static number, and the second access counter can
can become a continuous flip of the animation form, the third visit, the counter may be changed from virtual to real unreal
Change form. In order to achieve this effect, you first need to prepare some basic material, that is, 10 types of display numbers
Image files. can use graphics editing tools (such as Photoshop, animator, etc.) according to their own imagination
can also be downloaded directly from the online picture library, and then these digital images will be
00.gif ... 09.gif ... 90.gif ... The 99.gif form is stored in a readable directory, below
Examples of these image files are stored in "http://localhost/images". Here GIF file name
The principle is: the 1th digit represents the display type, the 2nd digit number represents the numeric value, such as 00.gif represents the 0 type number 0
GIF file, 09.gif represents a 0-digit 9 gif file.
Second, one design method: Using JavaScript to make fun counters
----1. Design ideas:
----The key of this method is the comprehensive application of cookie technology and dynamic image characteristics. Using cookies, you can use the
User's data is logged on the client's hard disk, and the next time you visit the site, you can read the
Cookies, directly know the visitor's identity and the number of visits and other related information. JavaScript, through
The Document.cookie property accesses the cookie, which includes the name, expiration date, valid domain name, valid
URL path, and so on. The name separated by an equal sign and its value is the actual data for the cookie, which is used in this example to store the access
The number of times a person accesses the page. By mapping the images in the Web page to a images array, you fix them under certain conditions
By changing the feature of the array item, the dynamic image display can be realized. In this case, you first preload a set of images, each time you tune
When using this Web page, a new set of images is randomly generated, which can be used to realize the dynamic and interesting effect by covering the original image.
----2. SOURCE program count.html:
HTML >
Head >
Meta http-equiv= "Content-type"
Content= "text/html; charset=gb2312 ">
"Title" Interesting Counter "/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) {
If the visitor's first visit,
Assign a counter value of 1, or add 1 cumulative
var wwhcount=getcookie (' Wwhcount ');
if (wwhcount==null) {
Wwhcount=1;
}
else{wwhcount++;}
Setcookie (' Wwhcount ', wwhcount,exp);
Return Countdisp (Wwhcount)
}
function Countdisp (Countvar) {
To achieve a random display, less than 6 digits to 0 completion,
You can adjust the number of display digits yourself
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.163design.net/a/y/"http:
Localhost/images/"+index+g+". gif ";
}
}
function Getcookieval (offset) {
Get the number of visits that this visitor has
var endstr=document.cookie.indexof (";", offset);
if (endstr==-1)
Endstr=document.cookie.length;
Return unescape (document.cookie.substring (OFFSET,ENDSTR));
}
function GetCookie (name) {
Intercepting the name Information section in a cookie
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) {
Store the number of the guest counter
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)?
":(";d omain= "+domain)") + ((secure==true)? "; Secure ":" ");
}
function Deletecookie (name) {
Invalidates the information line,
Delete the user information about the number of visits
var exp=new Date ();
Exp.settime (Exp.gettime ()-1);
var cval=getcookie (name);
document.cookie=name+ "=" +cval+ "
; expires= "+exp.togmtstring ();
}
/script ></P
! --Pre-loading image array--
You are the first img src=http://www.163design.net/a/y/"http://localhost/images/00.gif" height=20 width=20
>
IMG src=http://www.163design.net/a/y/"Http://localhost/images/00.gif"
Height=20 Width=20 >
IMG src=http://www.163design.net/a/y/"Http://localhost/images/00.gif"
Height=20 Width=20 >
IMG src=http://www.163design.net/a/y/"Http://localhost/images/00.gif"
Height=20 Width=20 >
I mg src=http://www.163design.net/a/y/"Http://localhost/images/00.gif"
Height=20 Width=20 >
IMG src=http://www.163design.net/a/y/"Http://localhost/images/00.gif"
Height=20 Width=20 > The time to visit!
Script language= "JavaScript"
Call the Count () function,
Implement the dynamic image display of the counter
Count ();
/script >
/body >
/html >
----3. Precautions:
----Because the JavaScript language is used, the method is independent of the application platform and can be applied
On Unix,
