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 相关文章推荐
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 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 SEO优化之URL优化方法
2011/04/21 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
捕获关闭窗口的脚本
2009/01/10 Javascript
xml和web特殊字符
2009/04/28 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
在Python中使用HTML模版的教程
2015/04/29 Python
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
python 实现登录网页的操作方法
2018/05/11 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
python脚本开机自启的实现方法
2019/06/28 Python
python如何统计代码运行的时长
2019/07/24 Python
Python编程中类与类的关系详解
2019/08/08 Python
python实现简单俄罗斯方块
2020/03/13 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
小学生期末评语大全
2014/04/21 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
java泛型通配符详解
2021/07/25 Java/Android
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers