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写的操作系统
Apr 23 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
浅谈angular4实际项目搭建总结
Dec 01 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
php实现word转html的方法
2016/01/22 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
React优化子组件render的使用
2019/05/12 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
项目资料员岗位职责
2013/12/10 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
求职信标题怎么写
2014/05/26 职场文书
教师工作失职检讨书
2014/09/18 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
JavaScript函数柯里化
2021/11/07 Javascript
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
MySQL数据管理操作示例讲解
2022/12/24 MySQL