function addMonitorElement(idName) {
function timer(n_hour, n_min, n_sec) {
console.log(n_hour, n_min, n_sec)
return setInterval(function () {
window.str_sec = n_sec;
window.str_min = n_min;
window.str_hour = n_hour;
if (window.str_sec < 10) {
window.str_sec = n_sec;
}
if (window.str_min < 10) {
window.str_min = n_min;
}
if (window.str_hour < 10) {
window.str_hour = n_hour;
}
var time = window.str_hour + ":" + window.str_min + ":" + window.str_sec;
console.log(time, "时间")
n_sec++;
if (n_sec > 59) {
n_sec = 0;
n_min++;
}
if (n_min > 59) {
n_sec = 0;
n_hour++;
}
}, 1000);
}
window.isFirstEle = true
window.str_hour = 0, window.str_min = 0, window.str_sec = 0
this.idName = idName
function handleScroll() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
var eleHeight = document.getElementById(idName).offsetTop
var Height = Number(document.getElementById(idName).offsetHeight)
if (eleHeight < clientHeight + scrollTop + 20 && clientHeight + scrollTop + 20 < eleHeight + Height + window.innerHeight) {
console.log("能看见元素", eleHeight, scrollTop, clientHeight)
if (window.isFirstEle == true) {
window.n_timer = timer(0, 0, 0);
window.isFirstEle = false
} else {
clearInterval(window.n_timer);
window.n_timer = timer(window.str_hour, window.str_min, window.str_sec);
}
} else {
clearInterval(window.n_timer);
}
}
function thorttle(fn, time) {
window.flag = null;
return function () {
if (!window.flag) {
window.flag = true;
fn();
setTimeout(() => {
window.flag = false;
}, time)
}
}
}
const throttleHandleScroll = thorttle(handleScroll, 100)
window.addEventListener('scroll', throttleHandleScroll);
}
addMonitorElement("blue")
let timing = performance.timing
start = timing.navigationStart,
dnsTime = 0,
tcpTime = 0,
firstPaintTime = 0,
domRenderTime = 0,
loadTime = 0;
dnsTime = timing.domainLookupEnd - timing.domainLookupStar;
tcpTime = timing.connectEnd - timing.connectStart;
firstPaintTime = timing.responseStart - start;
domRenderTime = timing.domContentLoadedEventEnd - start;
loadTime = timing.loadEventEnd - start;
console.log('DNS解析时间:', dnsTime,
'\nTCP建立时间:', tcpTime,
'\n首屏时间:', firstPaintTime,
'\ndom渲染完成时间:', domRenderTime,
'\n页面onload时间:', loadTime);