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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
JavaScript 定时器详情
Nov 11 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
Python中list初始化方法示例
2016/09/18 Python
Python中使用支持向量机(SVM)算法
2017/12/26 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
财务助理岗位职责
2013/11/10 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
村党建工作汇报材料
2014/11/02 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
小学生通知书评语
2014/12/31 职场文书
荆州古城导游词
2015/02/06 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android