面試總結之統計商品的曝光率
阿新 • • 發佈：2018-10-31
<!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>