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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
轮播图组件js代码
Aug 08 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
nuxt引入组件和公共样式的操作
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实现根据密码长度显示安全条
2017/07/04 PHP
菜鸟javascript基础整理1
2010/12/06 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
OpenCV 边缘检测
2019/07/10 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
表彰先进的通报
2014/01/31 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
个人年底工作总结
2015/03/10 职场文书
职工培训工作总结
2015/08/10 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python