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 相关文章推荐
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
jquery选择器简述
Aug 31 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 Javascript
javascript实现数字时钟效果
Feb 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
用Zend Encode编写开发PHP程序
2010/02/21 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
python计算方程式根的方法
2015/05/07 Python
老生常谈python中的重载
2018/11/11 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
python super()函数的基本使用
2020/09/10 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
领导失职检讨书
2014/02/24 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript