趣味访客计数器设计两则

2016-01-29 17:16 1 1 收藏

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

【 tulaoshi.com - ASP 】

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

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

来源:https://www.tulaoshi.com/n/20160129/1500808.html

延伸阅读
标签: PHP
       <?php         $counterFile = "balong.txt";//存储数值的文件名几路径      function displayCounter($counterFile) {    $fp = fopen($counterFile,"rw");    $num = fgets($fp,5);    $num +...
标签: PHP
  最近嘉新的计数器改成文本的了,不过正好.. //count.php -js 应用版 <? $a=file("http://www.jx.zj.cninfo.net/cgi-bin/count.cgi?df=wfnic.dat"); print "document.write('<b$a[0]</b');"; ? //php 直接版 <? $a=file("http://www.jx.zj.cninfo.net/cgi-bin/count.cgi?df=wfnic.dat"...
标签: ASP
  网页计数器DIY 随着网络大行其道,网页计数器也流行起来。事实上大多数网站均有网页计数器,用以反映该网站的访问量。计数器的来源很广,Frontpage等网页编辑器自带了网页计数器,有的站点也提供免费的计数器下载。其实熟悉了ASP编程后,自己做一个计数器很容易。下面介绍一种实现方法。 计数器原理是:在第一次使用网页时置初始值1,以...
标签: PHP
  1)文本计数器 <?php $countfile="/count.txt";  //设置保存数据的文件 if (!file_exists($countfile)){//判断文件是否存在 exec( "echo 0 $countfile"); } $fp = fopen($countfile,"rw"); $length=filesize($countfile); $num = fgets($fp,$length); $num += 1; exec( "rm -rf $...
标签: Java JAVA基础
  import java.io.Serializable; public class Counter implements Serializable{ // Initialize the bean on creation int count = 0; // Parameterless Constructor public Counter() { } // Property Getter public int getCount() { // Increment the count property, with every request count++; return this.count; } // P...

经验教程

936

收藏

59
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部