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的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
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安全的URL字符串base64编码和解码
2014/06/19 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
Javascript string 扩展库代码
2010/04/09 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
详解python单例模式与metaclass
2016/01/15 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
Python配置文件处理的方法教程
2019/08/29 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
个人自我鉴定总结
2014/03/25 职场文书
期末评语大全
2014/05/04 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
五一晚会主持词
2015/07/01 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
初一军训感言
2015/08/01 职场文书
开学第一天的感想
2015/08/10 职场文书
党员反邪教心得体会
2016/01/15 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书