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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
基于Jquery的温度计动画效果
Jun 18 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
javascript实现前端input密码输入强度验证
Jun 24 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 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简单备份与还原MySql的方法
2016/05/09 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
Python tkinter模版代码实例
2020/02/05 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
详细分析Python collections工具库
2020/07/16 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
.NET概念性的面试题
2012/02/29 面试题
八年级美术教学反思
2014/02/02 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
python识别围棋定位棋盘位置
2021/07/26 Python
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技
ICOM R71E和R72E图文对比解说
2022/04/07 无线电