趣味访客计数器设计两则

﹏ヽ空白

﹏ヽ空白

2016-01-29 17:16

趣味访客计数器设计两则,趣味访客计数器设计两则
  访客计数器作为网站不可缺少的部分,不仅可以记录网站被访问的次数,而且可
以通过生动有趣的设计来加强网页的趣味性和可观赏性,使访客计数器成为网页上的
一个风景。下面介绍两种轻松设计趣味访客计数器的方法,希望对大家有所帮助。

一、素材准备
---- 趣味访客计数器是将计数器的设计与趣味性的显示效果结合在一起,十种不同风
格的计数器随机出现在网页上,为相对静止和严肃的网页增加一些动态的效果和趣
味。第一次访问时,计数器显示的可能是红色的静态数字,第二次访问时,计数器可
能变成了不断翻转的动画形式,第三次访问时,计数器可能又变成了由虚到实的虚幻
变化形式。为了实现这种效果,首先需要准备一些基本素材,即十种显示类型的数字
图像文件。可以用图形编辑工具(如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://img.jcwcn.com/attachment/portal/jcwcj/2005-12/10/05121001170821983.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))+(
展开更多 50%)
分享

猜你喜欢

趣味访客计数器设计两则

ASP
趣味访客计数器设计两则

用PHP生成访客计数器

PHP
用PHP生成访客计数器

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

计数器详细设计

PHP
计数器详细设计

ASP图形计数器设计详解

ASP
ASP图形计数器设计详解

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

js计数器代码

Web开发
js计数器代码

php计数器的设计与实现

Web开发
php计数器的设计与实现

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Vista Beta2 中文版优化归类

Vista Beta2 中文版优化归类

FrontPage创建HTML/ASP混合页面Ⅰ

FrontPage创建HTML/ASP混合页面Ⅰ
下拉加载更多内容 ↓