<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn-h5.iauto360.cn/css/reset.min.css">
<style>
html,body{
font-size: 100px;
overflow-x: hidden;
}
#info {
height: 800px;
width: 100%;
font-size:20px;
}
#t1,#t2,#t3 {
width: 100px;
height: 100px;
background: red;
margin-right: 20px;
font-size: 22px;
}
#t1,#t2{
float: left;
}
#t3{
margin-top: 140px;
background: #000;
color:#fff;
}
</style>
<script>
//->REM
~function () {
var desW = 750,
winW = document.documentElement.clientWidth || document.body.clientWidth;
if (winW > desW) {
return;
}
document.documentElement.style.fontSize = winW / desW * 100 + 'px';
}();
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/babel-polyfill/7.10.1/polyfill.min.js"></script>
</head>
<body>
<div id="info">IntersectionObserver--采集多元素曝光时间-demo</div>
<div id="t1">t1</div>
<div id="t2">t2</div>
<div id="t3">t3</div>
<script>
var tdata = {};//元素集数据
let observer = new IntersectionObserver((entries) => {
initTdata(tdata,entries);
// console.log("tdata:::",tdata)
entries.forEach((entry,index) => {
// console.log(entry.target.getAttribute('id')+"=====================");
var tg = entry.target.getAttribute('id');
// console.log("tg:",tg)
if (!entry.isIntersecting) {
entry.isIntersecting = true
if(tdata[tg].flag == 0){
tdata[tg].end_time = entry.time;
let tt = (tdata[tg].end_time - tdata[tg].start_time)/1000;
tdata[tg].duration = tdata[tg].duration + tt;
};
tdata[tg].flag = 0;
} else {
entry.isIntersecting = false;
tdata[tg].start_time = entry.time;
}
// console.log(entry.target.getAttribute('id')+"=====================");
})
console.log("曝光元素数据集：",JSON.stringify(tdata));
}, {
root: null // null 的时候可以省略
})
function initTdata(tdata,entries){
if(Object.keys(tdata).length>0) return;
for(var i=0; i < entries.length;i++){
let tg = entries[i].target.getAttribute('id');
tdata[tg] = {
flag:1,
start_time:0,
end_time:0,
duration:0
}
}
}
observer.observe(t1)
observer.observe(t2)
observer.observe(t3)
</script>
</body>
</html>
