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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
JS实现数据动态渲染的竖向步骤条
Jun 24 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中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
javascript回车完美实现tab切换功能
2014/03/13 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python读写文件方法总结
2015/06/09 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
Python科学画图代码分享
2017/11/29 Python
python2 与python3的print区别小结
2018/01/16 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
python中的decorator的作用详解
2018/07/26 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
医院总经理岗位职责
2014/02/04 职场文书
计算机网络专业求职信
2014/06/05 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
2014财务年终工作总结
2014/12/08 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript