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操作页面表格,元素的一些技巧
Feb 02 Javascript
javascript 可以拖动的DIV(二)
Jun 26 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
JavaScript学习笔记之函数记忆
Sep 06 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
node.js文件操作系统实例详解
Nov 05 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计算上一个月的今天
2013/05/23 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python字典键值对的添加和遍历方法
2016/09/11 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
Python count函数使用方法实例解析
2020/03/23 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
浅析Python 多行匹配模式
2020/07/24 Python
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
岗位廉政承诺书
2014/03/27 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
个人更名证明
2015/06/23 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
linux目录管理方法介绍
2022/06/01 Servers