javascript实现用户点击数量统计


Posted in Javascript onDecember 25, 2016

在微信上做一次推广活动,页面共计三个按钮,需要分别统计点击次数,pc上的相关统计用的是“百度统计”,因为H5活动页的时效性等原因,并没有使用百度统计,而是自己实现一个简单的统计小方案前端点击时请求一个空白小gif图,带有参数,后端同事根据nginx请求日志做统计,通过在cookie中存入一个不会重叠的时间戳作为key值来区分是否同一用户(uv)。

请求的图片存在七牛中,是固定不变的,主要变化是后面两个参数:用户标识uid和按钮标识,其中生成不重复(把重复率降到最低)的用户标识很有意思。

时间戳用new Date().getTime()得出一个13位的“随机数”,精确到毫秒,但万一同一毫秒有两个以上用户点击呢?于是再严谨一些,用for循环在随机一个5位字符串拼接,这样的重复率绝对够用:

uid = new Date().getTime();
var randomNumber = '';
for(var i = 0 ; i < 5 ; i ++){
 randomNumber += new String (Math.floor(Math.random() * 10));
}
uid = uid + randomNumber;

下面是具体逻辑代码,当网页中已有请求图片时,更改url的参数也一样能从新发起一个get请求,避免每次点击都append一张图片。这种实现方法感觉比点击发送ajax更加方便。

statistics: function(position){
 var pic = "http://wx.daigj.com/notification/statistics/p.gif";
 var uid = util.readCookie("uid");
 var imgLength = $("#statistics-img").length;
 if(uid){
 if(imgLength == 0){
  $('body').append('<img id="statistics-img" src="' + pic + '?uid='+ uid + '&position='+ position +'"/>');
 }else{
  $("#statistics-img").attr("src",pic+"?uid="+uid+"&position="+position);
 }
 }else{
 uid = new Date().getTime();
 var randomNumber = '';
 for(var i = 0 ; i < 5 ; i ++){
  randomNumber += new String (Math.floor(Math.random() * 10));
 }
 uid = uid + randomNumber;
 util.createCookie("uid",uid);
 $('body').append('<img id="statistics-img" src="' + pic + '?uid='+ uid + '&position='+ position +'"/>');
 }
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 #Javascript
js实现图片切换(动画版)
Dec 25 #Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 #Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 #Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 #Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 #Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 #Javascript
You might like
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
使用javascipt---实现二分查找法
2013/04/10 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
JSON 数据格式详解
2017/09/13 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
mac使用python识别图形验证码功能
2020/01/10 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
python 穷举指定长度的密码例子
2020/04/02 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
extern在函数声明中是什么意思
2014/01/19 面试题
煤矿安全生产责任书
2014/04/15 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
人民币使用说明书
2019/04/17 职场文书
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS