之前新人做的 加密狗 显示水印遮罩的功能，一直有问题，逻辑还找不出来哪有问题，自己简单写了个demo，照着套：
<!doctype html>
<html lang="en" translate="no">
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
.box {
height: 500px;
border: 1px solid #ddd;
text-align: center;
line-height: 500px;
}
.shadow {
display: none;
background-color: #ddd;
width: 100%;
height: 100%;
cursor: pointer;
}
.btn-group {
margin-top: 10px;
}
</style>
<body>
<div class="box">
<div class='shadow'>
蒙层
</div>
</div>
<div class="btn-group">
<button class="start">加密狗轮训开始</button>
<button class="stop">加密狗轮训停止</button>
<button class="open">加密狗开启</button>
<button class="close">加密狗关闭</button>
</div>
<script type="text/javascript">
// 加密狗权限状态显示
let dogState = false;
// 加密狗权限轮训时长（ms）
let dogStep = 1000;
let dogTimer = null;
// 蒙层延时时长（ms）
let shadowStep = 12000;
let shadowTimer = null;
// 是否等待开启蒙层
let isWaitingShadow = false;
// 设置蒙层开启、关闭
function setShadowStatus(state) {
document.getElementsByClassName('shadow')[0].style.display = state;
}
// 获取加密狗权限轮训
function getDogAuth() {
console.log('dog loop');
clearTimeout(dogTimer);
dogTimer = setTimeout(() => {
console.log(dogState);
if (dogState) {
// 有权限，关闭蒙层，清除蒙层定时器
resetShadow();
} else {
// 没有权限，开启蒙层
if (!isWaitingShadow) {
openShadow();
}
}
// 开始下一次轮训
getDogAuth();
}, dogStep);
}
// 开启蒙层延时
function openShadow() {
console.log('waiting');
isWaitingShadow = true;
clearTimeout(shadowTimer);
shadowTimer = setTimeout(() => {
setShadowStatus('block');
isWaitingShadow = false;
}, shadowStep);
}
// 关闭蒙层，重置相关变量
function resetShadow() {
setShadowStatus('none');
clearTimeout(shadowTimer);
isWaitingShadow = false;
}
window.onload = function () {
// 设置按钮事件
document.getElementsByClassName('start')[0].addEventListener('click', function () {
console.log('start');
// 开始执行加密狗轮训
getDogAuth();
});
document.getElementsByClassName('stop')[0].addEventListener('click', function () {
console.log('stop');
// 清空定时器
clearTimeout(dogTimer);
clearTimeout(shadowTimer);
});
document.getElementsByClassName('open')[0].addEventListener('click', function () {
console.log('open');
dogState = true;
});
document.getElementsByClassName('close')[0].addEventListener('click', function () {
console.log('close');
dogState = false;
});
// 设置蒙层点击关闭
document.getElementsByClassName('shadow')[0].addEventListener('click', function () {
console.log('reset');
resetShadow();
});
}
</script>
</body>
</html>
标签：function,遮罩,console,log,加密狗,蒙层,延时,轮训 From： https://www.cnblogs.com/guofan/p/16903271.html