使用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 相关文章推荐
基于jquery的商品展示放大镜
Aug 07 Javascript
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
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之CodeIgniter学习笔记
2013/06/17 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
vue中的scope使用详解
2017/10/29 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
Python识别html主要文本框过程解析
2020/02/18 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
Python restful框架接口开发实现
2020/04/13 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
Python pandas如何向excel添加数据
2020/05/22 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
男方父母婚礼答谢词
2014/01/25 职场文书
学期自我评价
2014/01/27 职场文书
素质拓展感言
2014/01/29 职场文书
客户接待方案
2014/02/26 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
公司2014年度工作总结
2014/12/10 职场文书
杨善洲电影观后感
2015/06/04 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS