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 相关文章推荐
javascript call方法使用说明
Jan 11 Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
浅析javascript中的DOM
Mar 01 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
vue实现跨域的方法分析
May 21 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
react国际化react-intl的使用
May 06 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
Python函数参数类型*、**的区别
2015/04/11 Python
Python中字典映射类型的学习教程
2015/08/20 Python
python读写json文件的简单实现
2017/04/11 Python
python实现八大排序算法(2)
2017/09/14 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
django用户登录验证的完整示例代码
2019/07/21 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
中学生励志演讲稿
2014/04/26 职场文书
八年级英语教学计划
2015/01/23 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js
java实现web实时消息推送的七种方案
2022/07/23 Java/Android