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 相关文章推荐
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
js Math数学简单使用操作示例
Mar 13 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 什么是PEAR?(第二篇)
2009/03/19 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Python时间获取及转换知识汇总
2017/01/11 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
详解python的四种内置数据结构
2019/03/19 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
解决Django中多条件查询的问题
2019/07/18 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
物业管理大学生个人的自我评价
2013/10/10 职场文书
法学函授自我鉴定
2014/02/06 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
事业单位考察材料范文
2014/12/25 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
任命书格式模板
2015/09/22 职场文书