 |
|
|
 首页 |
名片设计 CorelDRAW Illustrator AuotoCAD Painter 其他软件 Photoshop Fireworks Flash |
|
访客计数器作为网站不可缺少的部分，不仅可以记录网站被访问的次数，而且可 以通过生动有趣的设计来加强网页的趣味性和可观赏性，使访客计数器成为网页上的 一个风景。下面介绍两种轻松设计趣味访客计数器的方式，希望对大家有所帮助。 一、素材预备 ---- 趣味访客计数器是将计数器的设计与趣味性的显示效果结合在一起，十种不同风 格的计数器随机出现在网页上，为相对静止和严厉的网页增加一些动态的效果和趣 味。第一次访问时，计数器显示的可能是红色的静态数字，第二次访问时，计数器可 能变成了不断翻转的动画形式，第三次访问时，计数器可能又变成了由虚到实的虚幻 变化形式。为了实现这种效果，首先需要预备一些基本素材，即十种显示类型的数字 图像文件。可以用图形编辑工具（如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: //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> ---- 3．注重事项： ---- 由于使用了JavaScript语言，因此该方式具有与应用平台的无关性，可以适用 于Unix、Windows等多种平台。另外，此计数器不同于一般意义上的访客计数器，专 门用于记录某一访客对某一网站的访问次数。 二、设计方式之二：利用ASP技术制作趣味计数器 ---- 1．设计思想： ---- ASP（动态服务器主页）是微软公司推出的用以取代CGI的新技术，是目前公认 的建立Windows NT动态站点最好的工具。ASP包含在IIS3.0中，它提供了一个在服务 器端的scripting环境，在站点服务器上执行，具有简朴、实用、高效等特点。ASP内 含五个内置的ActiveX服务器组件，包括：数据库访问组件(Database Access component)、文件访问组件(File Access component)、广告轮播器组件(Ad Rotator component)、内容链接组件(Content Linking component)、浏览器信息 组件（Browser Capabilities component）.利用文件访问组件，通过 FileSystemObject对象和 TextStream对象，可以提供读写服务器文件的功能，实现 访客计数器功能。 ---- 2．源程序count.asp: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>趣味计数器</title> </head> <body> <p> <% dim out countfile=server.mappath("aspcount.txt") \\\'定义一个服务器组件 set objfile=server.createobject("scripting.filesystemobject") set out=objfile.opentextfile(countfile,1,false,false) ‘读取数据 counter=out.readline out.close set objfile=server.createobject("scripting.filesystemobject") set out=objfile.createtextfile(countfile,TRUE,FALSE) ‘暂时琐定 application.lock ‘访客次数加1 counter=counter+1 ‘写入数据 out.writeline(counter) ‘解锁 application.unlock out.close %> <script language="JavaScript"> 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"; } } </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> <img 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(counter); </script> </body> </html> ---- 3．注重事项： ---- 该计数器只能运行于Windows环境，包括Windows NT Server 4.0（须安装 IIS3.0）、Windows NT 4.0(须安装Peer Web Services)、Windows 95(须安装 Peer Web Services)。ASP文件扩展名以.asp表示，可以用常规的文本编辑器编辑， 也可以利用专门的辅助开发工具InterDev进行开发设计，而且该文件必须存放于具有 执行功能的目录中。 返回类别: 教程 上一教程: XMLHTTP组件获取远程文件并筛选出目标数据 下一教程: 巧用ASP生成PDF文件 您可以阅读与"趣味访客计数器设计两则"相关的教程: · ASP图形计数器设计详解 · ASP计数器设计详解-2 · ASP计数器设计详解-1 · ASP计数器设计详解 · 如何轻松打造ASP计数器 |
  |
| 快精灵印艺坊 版权所有 |
首页 会员中心在线印刷在线编辑付款方式索取样品设计指南连锁门店
|
||
