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获取div高度的代码
Aug 09 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
react antd实现动态增减表单
Jun 03 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中使用模板的方法
2008/05/24 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
详解JavaScript 异步编程
2020/07/13 Javascript
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
Python遍历字典方式就实例详解
2019/12/28 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
最新教师自我评价分享
2013/11/12 职场文书
医护人员英文求职信范文
2013/11/26 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
教师三严三实心得体会
2014/10/11 职场文书
2014年优秀党员材料
2014/12/18 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
z-index不起作用
2021/03/31 HTML / CSS
Python+Appium新手教程
2021/04/17 Python
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
MySQL 5.7常见数据类型
2021/07/15 MySQL
Tomcat弱口令复现及利用
2022/05/06 Servers