面试总结-统计商品的曝光率
Posted leyi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了面试总结-统计商品的曝光率相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .conatiner{display: -webkit-flex;display: flex;justify-content: center;align-items: center} ul li{width:150px;height:150px; margin-bottom:15px; background:lightblue; border:1px solid deepskyblue; list-style:none;text-align: center;line-height: 150px; color:#fff;} </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <div class="conatiner"> <ul> <li data-id="g1">1</li> <li data-id="g2">11</li> <li data-id="g3">111</li> <li data-id="g4">1111</li> <li data-id="g5">11111</li> <li data-id="g6">111111</li> <li data-id="g7">1111111</li> <li data-id="g8">11111111</li> <li data-id="g9">111111111</li> <li data-id="g10">1111111111</li> <li data-id="g11">11111111111</li> <li data-id="g12">111111111111</li> </ul> </div> </body> <script type="text/javascript"> var lastItemIdx= 0,visitedIds=[]; //发送统计 function SendStatistics(){ var $ul= $(‘ul li‘);//商品图片列表 var scrollHeight=$(window).height()+$(window).scrollTop();//已经滚动的页面高度 $.each($ul, function (index, item) { curItemOffsetTop=item.offsetTop; //当该item被元素包裹时，无法获取到窗口顶部的真实距离 //getBoundingClientRect用于获取某个元素相对于窗口的位置集合。集合中有top, right, bottom, left等属性 //使用curItemOffsetTop=item.getBoundingClientRect().top 进行获取 var curItemIdx=index+1; if(curItemOffsetTop<scrollHeight&&curItemIdx>lastItemIdx){ //如何提交统计值，form提交会刷页面，ajax提交开销太大，通过src链接方式进行提交最好,还可以跨域 visitedIds.push($(item).data("id")); sendUrl("http://www.cnblogs/com/leyi?visitedIds="+visitedIds.join()); //跨域提交统计数据 document.cookie="visitedIds="+visitedIds;//保存在cookie里可以下次请求时提交,不能跨域 lastItemIdx+=1; } }); } //可以跨域的统计数据发送方式（src链接不受同源策略约束） function sendUrl(url) { let img = new Image(); let key = ‘statistics_log_‘+ Math.floor(Math.random() * 12345789).toString(16); window[key] = img; img.onload = img.onerror = img.onabort = function () { img.onload = img.onerror = img.onabort = null; // 清除img元素 window[key] = null; img = null; }; img.src = url; } $(function(){ SendStatistics(); $(window).on("scroll",function(e){ SendStatistics(); }); }); </script> </html>
以上是关于面试总结-统计商品的曝光率的主要内容，如果未能解决你的问题，请参考以下文章