使用JavaScript制作一个简单的计数器的方法


Posted in Javascript onJuly 07, 2015

设计思想

该方法的关键是Cookie技术和动态图像特性的综合运用。使用Cookie,可以在用户端的硬盘上记录用户的数据,下次访问此站点时,即可读取用户端硬盘的Cookie,直接得知来访者的身份和访问次数等有关信息。JavaScript中通过document.cookie属性访问Cookie,这个属性包括名字、失效日期、有效域名、有效URL路径等。用等号分开的名字和其值是Cookie的实际数据,本例中用来存储该访问者访问该页面的次数。通过把Web页中的图像映射到一个Images数组,一定条件下修改该数组项的特性,可以实现动态图像显示。本例中,首先预载入一组图像,每次调用该Web页时,随机产生新的一组图像,通过覆盖原图像实现动态的趣味性效果。

 

源程序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>

注意事项

由于使用了JavaScript语言,因此该方法具有与应用平台的无关性,可以适用于Unix、Windows等多种平台。另外,此计数器不同于一般意义上的访客计数器,专门用于记录某一访客对某一网站的访问次数。

Javascript 相关文章推荐
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 Javascript
JavaScript编写推箱子游戏
Jul 07 #Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 #Javascript
理解JavaScript的变量的入门教程
Jul 07 #Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 #Javascript
javascript实现控制div颜色
Jul 07 #Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 #Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 #Javascript
You might like
PHP提取中文首字母
2008/04/09 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
微信小程序实现轮播图指示器
2022/06/25 Javascript