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 相关文章推荐
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
vue实现几秒后跳转新页面代码
Sep 09 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 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从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
javascript 播放器 控制
2007/01/22 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
详解各版本React路由的跳转的方法
2018/05/10 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
python贪吃蛇游戏代码
2020/04/18 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
Python多线程的退出控制实现
2020/08/10 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
Etam德国:内衣精品店
2019/08/25 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
温馨提示标语
2014/06/26 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
七年级作文之英语老师
2019/10/28 职场文书
python中pycryto实现数据加密
2022/04/29 Python
Python自动化实战之接口请求的实现
2022/05/30 Python