Products
GG网络技术分享 2025-03-18 16:14 0
平时做前端开发，对于页面切换、最小化、长时间不操作这些安全问题，其实接触不多，除非涉及到隐秘问题，可能需要将这些实现考虑进去。这次我接到这个需求时，也是处于懵逼状态
visibilityChange，这个在浏览器标签页被隐藏或显示的时候都会除非该方法，看似能满足页面切换或最小化。但是它有个问题，就是在页面缩放，下图绿色标识，而非最小化时也会执行该方法。
document.addEventListener(visibilityChange, () => {
let screenTop = window.localStorage.getItem(\'screenTop\');
// 隐藏时触发了2次
setTimeout(() => {
// 采用screenTop，是因为缩放时也会触发该事件，无法区分是缩放还是最小化
if (screenTop && screenTop == window.screenTop && document.visibilityState === hidden) {
this.props.dispatch({
type: \'SET_PAYROLL_STATUS\',
data: false
})
// window.location.href = window.location.href;
} else {
window.localStorage.setItem(\'screenTop\', window.screenTop)
}
}, 0)
}, false)
上面代码中的判断screenTop==window.screenTop能将缩放这个排除在外，结合document.visibilityState能实现页面切换、页面最小化的时候修改状态保证页面内容安全，譬如通过设置状态为false，不展示设计安全的内容。
而判断长时间是否操作，主要是通过setInterval来倒计时变量count，如果有操作就将count初始化，从新倒计时。
hasOperate = (callback, second) => {
let count = 0;
const countTime = () => {
timer = setInterval(() => {
if (document.visibilityState === \'hidden\') {
count = 0;
// clearInterval(timer);
}
count++;
if (count == second) {
callback();
clearInterval(timer);
count=0
}
}, 1000);
}
let x;
let y;
document.addEventListener(\'mousemove\', () => {
let x1 = event.clientX;
let y1 = event.clientY;
if (x != x1 || y != y1) {
count = 0;
}
x = x1;
y = y1;
})
document.addEventListener(\'keydown\', () => {
count = 0;
})
document.addEventListener(\'scroll\', () => {
count = 0;
})
上面代码，主要通过统计count等于你设置的初始化时间second，进行回调，回调的主要内容是隐藏安全页面；如果在统计的过程中发现有滚动或鼠标移动以及键盘按下等相关操作，则将count初始化为0，酱紫就能完成长时间不操作的问题了
本文实例为大家分享了js实现tab栏切换效果的具体代码，供大家参考，具体内容如下
效果展示：
源码展示：
| <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>js实现tab栏切换</title> <style> * { margin: 0; margin: 0; padding: 0; list-style: none; } .nav { width: 100%; height: 50px; } .nav ul { width: 600px; height: 50px; margin: 0 auto; } .nav ul li { width: 120px; height: 50px; font-weight: 800; font-size: 18px; color: #515151; line-height: 50px; text-align: center; float: left; cursor: pointer; } .tiao { width: 600px; height: 5px; background-color: #515151; margin: 0 auto; position: relative; top: 0; left: 0; } .zhou { width: 120px; height: 5px; background-color: red; position: absolute; top: 0; left: 0; } .ww { width: 0px; border-width: 8px; border-style: solid; border-color: rgba(250, 0, 255, 0) rgba(250, 0, 255, 0) red rgba(250, 0, 255, 0); position: absolute; top: -16px; left: 56px; } .nei { width: 600px; height: 300px; margin: 0 auto; } .nei li { width: 600px; height: 300px; color: #fff; font-family: \"微软雅黑\"; font-size: 40px; text-align: center; line-height: 300px; display: none; margin-top: 10px; } </style> </head> <body> <div class=\"nav\"> <ul> <li onmouseover=\"don(0)\">大娃</li> <li onmouseover=\"don(1)\">二娃</li> <li onmouseover=\"don(2)\">三娃</li> <li onmouseover=\"don(3)\">四娃</li> <li onmouseover=\"don(4)\">五娃</li> </ul> </div> <div class=\"tiao\"> <div id=\"zhou\" class=\"zhou\" style=\"left: 0;\"> <div class=\"ww\"></div> </div> </div> <div id=\"nei\" class=\"nei\"> <ul> <li style=\"background-color:#e4007f; display: block;\">大娃出世</li> <li style=\"background-color:#687de8\">二娃出世</li> <li style=\"background-color:#2fb936\">三娃出世</li> <li style=\"background-color:#4dd5d0\">四娃出世</li> <li style=\"background-color:#e24759\">五娃出世</li> </ul> </div> <script> var k; var kk = 0; function don(gh) { if (kk == 0) { kk = 1 var w1 = document.getElementById(\'zhou\') var t = parseInt(w1.style.left) if (t < gh * 120) { k = window.setInterval( function () { goright(gh * 120) }, 30 ) } else if (t > gh * 120) { k = window.setInterval( function () { goleft(gh * 120) }, 30 ) } else { kk = 0 } var w2 = document.getElementById(\'nei\').getElementsByTagName(\'li\') for (var i = 0; i < w2.length; i++) { w2[i].style.display = \"none\" } w2[gh].style.display = \"block\" } } //右移动 function goright(gh1) { var w1 = document.getElementById(\'zhou\') var t = parseInt(w1.style.left) t += 20 if (t >= gh1) { t = gh1 window.clearInterval(k) kk = 0 } w1.style.left = t + \"px\" } //左移动 function goleft(gh1) { var w1 = document.getElementById(\'zhou\') var t = parseInt(w1.style.left) t -= 20 //alert(t) if (t <= gh1) { t = gh1 window.clearInterval(k) kk = 0 } w1.style.left = t + \"px\" } </script> <hr> <pre style=\"color:red\"> 感： 最近贡献一下我在教学中的小案例可以能给你一些帮助 ,希望继续关注我的博客 --王 </pre> </body> </html> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
Demand feedback
