JavaScript实现系统防挂机(无操作弹窗)的示例详解
更新时间：2023年01月09日 14:05:46 作者：CoolDog;
在一些学习系统，或者考试系统中。一旦出现长时间未操作，就会判定这个人不在场。所以就会进行退出系统，处于对安全和系统负担还有业务的需求。本文就来用JavaScript做一个系统防挂机功能，需要的可以参考一下
介绍
在一些学习系统，或者考试系统中。一旦出现长时间未操作，就会判定这个人不在场。所以就会进行退出系统，处于对安全和系统负担还有业务的需求。
简单讲：这个功能，就像你打游戏的时候长时间不操作，就会有请你认真对待游戏的弹框，让你认真对待游戏的意思。
动图演示
正常演示
关闭一个警告，即关闭所有
操作页面则，重置其他的倒计时
实现原理
1，分别定义倒计时定时器和警告定时器
2，定义监控区域，或者监控接口时触发重置定时器任务
3，倒计时定时器执行结束后，调用警告定时器任务
4，警告定时器存在时
- 如果关闭窗口则重启定时器
- 如果不操作则会退出登录等业务操作
难点
1，当出现多个页面的时候，需要取最新操作的页面的计时器为全局时间；
2，当多个页面同时出现倒计时警告时，关闭其中一个，则需要关闭所有警告提示；
3，当A页面先进行倒计时，B页面后进行倒计时。如果A页面结束，不允许关闭或退出系统！（因为B页面没有结束）
代码实现
因为防挂机，无操作弹框的需求逻辑一样，无论哪种语言都是一样的逻辑，这里就只用js进行代码演示。虽然但是，备注写的是很详细的。
初始化变量
//定义全局变量
var Min = 1; //可以设置动态读取
var RunTime = 0; //进行中的时间，单位秒
var StayTimer = null;//全局定时器
var WarningTimer = null;//警告的定时器
var TimeSwich = false;//防止重复启动（重复启动会导致多读了3秒）
test = 0;//测试变量（不影响整体逻辑）
//定义监控范围（绿色方块）
var vdoc = document.getElementById("myFrame");
setDocumentEventListener(vdoc);
//开局执行一次
resetTimer();开始倒计时的方法
function SetTimer() {
/*if (TimeSwich = true;)*/
clearInterval(StayTimer);
//设置定时任务的时间
RunTime = Number(Min * 12);
test = 111;
//设置定时任务；
StayTimer = setInterval(() => {
/*TimeSwich = true;*/
timeOut();
}, 1000);
//random()
}核心方法
function timeOut()
{
RunTime--;
//这两行代码都是输出显示
console.log(RunTime);
document.getElementById("lastTime").innerHTML = RunTime;
if (RunTime <= 0) {
//正常倒计时结束，将IsReset赋值2，使其他标签看到就提前弹框告知是否继续使用！！！
var isReset = window.localStorage.setItem("IsReset", 2);
clearInterval(StayTimer);
//开启警告倒计时
document.getElementsByClassName("fullScreenDiv")[0].style.display = "block";
document.getElementsByClassName("promptDiv")[0].style.display = "block";
startCountDown(document.getElementById("spanCountDown").innerText);
}
//检测别的页面是否有操作，有则刷新当前页的倒计时；
var isReset = window.localStorage.getItem("IsReset");
if (isReset == 1) {
SetTimer();
//延迟1秒后，执行删除；（延迟的作用是为了使其充分的删除所有标签页的警告）
setTimeout(function () {
window.localStorage.removeItem('IsReset');
}, 1000);
}
//如果IsReset=2，证明其他标签的倒计时结束了，此时本标签也弹框。让用户进行选择关闭还是继续；
else if (isReset == 2) {
clearInterval(StayTimer);
//setTimeout(function () {
// window.localStorage.removeItem('IsReset');
//}, 1000);
document.getElementsByClassName("fullScreenDiv")[0].style.display = "block";
document.getElementsByClassName("promptDiv")[0].style.display = "block";
startCountDown(document.getElementById("spanCountDown").innerText);
}
}重置倒计时任务
function resetTimer() {
var isReset = window.localStorage.setItem("IsReset", 1);
TimeSwich = false;
SetTimer();
}开启警告倒计时的方法
function startCountDown(html) {
clearInterval(WarningTimer);
WarningTimer = setInterval(() => {
html = parseInt(html) - 1;
if (parseInt(html) <= 0) {
closeme();
}
document.getElementById("spanCountDown").innerText = html;
var checkClose = window.localStorage.getItem('checkClose');
if (checkClose == "1") {
backInit()
setTimeout(function () {
//1秒后执行刷新
window.localStorage.removeItem('checkClose');
}, 1000); //单位是毫秒
}
}, 1000);
}关闭和重置警告倒计时的方法
function closeme() {
//debugger;
var browserName = navigator.appName;
if (browserName == "Netscape") {
window.open('', '_parent', '');
window.close();
} else if (browserName == "Microsoft Internet Explorer") {
window.opener = "whocares";
window.close();
}
alert("你已封号！");
}
function backInit() {
window.localStorage.setItem("checkClose", "1");
resetTimer();
document.getElementById("spanCountDown").innerText = 7;
clearInterval(WarningTimer);
document.getElementsByClassName("fullScreenDiv")[0].style.display = "none";
document.getElementsByClassName("promptDiv")[0].style.display = "none";
}源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>防挂机</title>
</head>
<body>
<!--监控页面-->
<div id="myFrame" style="background-color: palegreen; margin-left: 20%; width: 900px; height: 900px">
<span id="lastTime">：</span>
<span>second</span>
<p>ps：划过或点击绿色方块则会重置倒计时时间。</p>
</div>
<!--警告倒计时页面-->
<div class="fullScreenDiv" style="display:none;z-index: 800;">
<div class="promptDiv" style="display:none;z-index: 800;padding-bottom: 20px;">
<h4 class="close" onclick="backInit();">
<span class="X" style="margin-right: 38%;">Warning</span>
<span class="X">X</span>
</h4>
<p id="msgInfo" style="text-align: left;margin-left: 50px;margin-right: 50px;"></p>
<p id="msgTimeout" style="text-align: left;margin-left: 50px;margin-right: 50px;margin-bottom: 15px;"></p>
<span style="margin-bottom: 50px;">请积极对待游戏</span>
<span class="countDown" id="spanCountDown" style="margin-bottom: 50px;">7</span>
</div>
</div>
<!--<script >-->
<script type="text/javascript">
//定义全局变量
var Min = 1; //可以设置动态读取
var RunTime = 0; //进行中的时间，单位秒
var StayTimer = null;//全局定时器
var WarningTimer = null;//警告的定时器
var TimeSwich = false;//防止重复启动（重复启动会导致多读了3秒）
test = 0;//测试变量（不影响整体逻辑）
//定义监控范围（绿色方块）
var vdoc = document.getElementById("myFrame");
setDocumentEventListener(vdoc);
//开局执行一次
resetTimer();
function SetTimer() {
/*if (TimeSwich = true;)*/
clearInterval(StayTimer);
//设置定时任务的时间
RunTime = Number(Min * 12);
test = 111;
//设置定时任务；
StayTimer = setInterval(() => {
/*TimeSwich = true;*/
timeOut();
}, 1000);
//random()
}
function timeOut()
{
RunTime--;
//这两行代码都是输出显示
console.log(RunTime);
document.getElementById("lastTime").innerHTML = RunTime;
if (RunTime <= 0) {
//正常倒计时结束，将IsReset赋值2，使其他标签看到就提前弹框告知是否继续使用！！！
var isReset = window.localStorage.setItem("IsReset", 2);
clearInterval(StayTimer);
//开启警告倒计时
document.getElementsByClassName("fullScreenDiv")[0].style.display = "block";
document.getElementsByClassName("promptDiv")[0].style.display = "block";
startCountDown(document.getElementById("spanCountDown").innerText);
}
//检测别的页面是否有操作，有则刷新当前页的倒计时；
var isReset = window.localStorage.getItem("IsReset");
if (isReset == 1) {
SetTimer();
//延迟1秒后，执行删除；（延迟的作用是为了使其充分的删除所有标签页的警告）
setTimeout(function () {
window.localStorage.removeItem('IsReset');
}, 1000);
}
//如果IsReset=2，证明其他标签的倒计时结束了，此时本标签也弹框。让用户进行选择关闭还是继续；
else if (isReset == 2) {
clearInterval(StayTimer);
//setTimeout(function () {
// window.localStorage.removeItem('IsReset');
//}, 1000);
document.getElementsByClassName("fullScreenDiv")[0].style.display = "block";
document.getElementsByClassName("promptDiv")[0].style.display = "block";
startCountDown(document.getElementById("spanCountDown").innerText);
}
}
//增加操作对象时所绑定的监控事件；
function setDocumentEventListener(vdoc) {
if (vdoc != null) {
vdoc.addEventListener("mousemove", resetTimer, false);
vdoc.addEventListener("mousedown", resetTimer, false);
vdoc.addEventListener("keypress", resetTimer, false);
vdoc.addEventListener("DOMMouseScroll", resetTimer, false);
vdoc.addEventListener("mousewheel", resetTimer, false);
vdoc.addEventListener("touchmove", resetTimer, false);
vdoc.addEventListener("MSPointerMove", resetTimer, false);
}
}
function resetTimer() {
var isReset = window.localStorage.setItem("IsReset", 1);
TimeSwich = false;
SetTimer();
}
function startCountDown(html) {
clearInterval(WarningTimer);
WarningTimer = setInterval(() => {
html = parseInt(html) - 1;
if (parseInt(html) <= 0) {
closeme();
}
document.getElementById("spanCountDown").innerText = html;
var checkClose = window.localStorage.getItem('checkClose');
if (checkClose == "1") {
backInit()
setTimeout(function () {
//1秒后执行刷新
window.localStorage.removeItem('checkClose');
}, 1000); //单位是毫秒
}
}, 1000);
}
function closeme() {
//debugger;
var browserName = navigator.appName;
if (browserName == "Netscape") {
window.open('', '_parent', '');
window.close();
} else if (browserName == "Microsoft Internet Explorer") {
window.opener = "whocares";
window.close();
}
alert("你已封号！");
}
function backInit() {
window.localStorage.setItem("checkClose", "1");
resetTimer();
document.getElementById("spanCountDown").innerText = 7;
clearInterval(WarningTimer);
document.getElementsByClassName("fullScreenDiv")[0].style.display = "none";
document.getElementsByClassName("promptDiv")[0].style.display = "none";
}
(function () {
})();
</script>
<style>
.fullScreenDiv { /* 全屏div */
display: none;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.promptDiv { /* 提示框div */
display: none;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 593px;
height: 174px;
border-radius: 20px;
background-color: white;
text-align: center;
}
.close {
height: 34px;
line-height: 34px;
margin: 0px;
text-align: right;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background-color: cornflowerblue
}
.X {
padding: 2px 6px;
margin-right: 8px;
color: white;
cursor: pointer;
}
.countDown { /*倒计时关闭提示框*/
color: red;
font-size: 28px;
}
</style>
</body>
</html>到此这篇关于JavaScript实现系统防挂机(无操作弹窗)的示例详解的文章就介绍到这了,更多相关JavaScript系统防挂机内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
bootstrap日期插件daterangepicker使用详解
这篇文章主要为大家详细介绍了bootstrap日期插件daterangepicker的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了JS实现跟随鼠标立体翻转图片的方法,涉及javascript操作图片翻转的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-05-05
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。本文给大家介绍BootStrap 栅格系统的相关资料,需要的朋友可以参考下2016-04-04
这篇文章主要为大家详细介绍了微信小程序重写tabbar底部导航，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
全局数据共享是为了解决组件之间数据共享的问题,下面这篇文章主要给大家介绍了关于微信小程序全局数据共享和分包的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
本文主要介绍了js实现带三角符手风琴效果的实例。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了JavaScript 文件加载与阻塞问题之性能优化案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
javascript学数组中的foreach方法和some方法
这篇文章主要介绍了 javascript学数组中的foreach方法和some方法，文章相关内容和代码详细，具有一定的参考价值，需要的小伙伴可以参考一下，希望对你的学习有所帮助2022-03-03
这篇文章主要介绍了JavaScript实现的背景自动变色代码,涉及JavaScript数组操作结合定时函数实现修改页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要介绍了JS实现向表格中动态添加行的方法,涉及javascript针对表格行的动态添加技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
最新评论