系统防挂机 | 无操作弹框（所有你想要需求的都有）

农民夜娱

背景：

介绍：

　　　　在一些学习系统，或者考试系统中。一旦出现长时间未操作，就会判定这个人不在场。所以就会进行退出系统，处于对安全和系统负担还有业务的需求。
　　简单讲：这个功能，就像你打游戏的时候长时间不操作，就会有请你认真对待游戏的弹框，让你认真对待游戏的意思。
动图演示:

　　正常演示

 
 
　　关闭一个警告，即关闭所有

 
 
　　操作页面则，重置其他的倒计时

 
 
　　　　
实现原理：

　　　　1，分别定义倒计时定时器和警告定时器
　　　　2，定义监控区域，或者监控接口时触发重置定时器任务
　　　　3，倒计时定时器执行结束后，调用警告定时器任务
　　　　4，警告定时器存在时
　　　　　　如果关闭窗口则重启定时器　
　　　　　　如果不操作则会退出登录等业务操作　　　　
难点：

　　　　1，当出现多个页面的时候，需要取最新操作的页面的计时器为全局时间；
　　　　2，当多个页面同时出现倒计时警告时，关闭其中一个，则需要关闭所有警告提示；
　　　　3，当A页面先进行倒计时，B页面后进行倒计时。如果A页面结束，不允许关闭或退出系统！（因为B页面没有结束）
代码实现：

　　　　　　　　　　　　　　

　　　　因为防挂机，无操作弹框的需求逻辑一样，无论哪种语言都是一样的逻辑，这里就只用js进行代码演示。虽然但是，备注写的是很详细的。如有疑问，欢迎评论探讨！最后留下可以直接执行的源代码。
　　　　初始化变量

1.         //定义全局变量
2.         var Min = 1; //可以设置动态读取
3.         var RunTime = 0; //进行中的时间，单位秒
4.         var StayTimer = null;//全局定时器
5.         var WarningTimer = null;//警告的定时器
6.         var TimeSwich = false;//防止重复启动（重复启动会导致多读了3秒）
7.         test = 0;//测试变量（不影响整体逻辑）
9.         //定义监控范围（绿色方块）
10.         var vdoc = document.getElementById("myFrame");
11.         setDocumentEventListener(vdoc);
12.         //开局执行一次
13.         resetTimer();

复制代码

　　　　开始倒计时的方法

1.         function SetTimer() {           
2.             /*if (TimeSwich = true;)*/
3.             clearInterval(StayTimer);
4.             //设置定时任务的时间
5.             RunTime = Number(Min * 12);
7.             test = 111;
8.             //设置定时任务；
9.             StayTimer = setInterval(() => {
10.                 /*TimeSwich = true;*/
11.                 timeOut();
12.             }, 1000);
13.             //random()
14.         }

复制代码

　　　　核心方法

[code]        function timeOut()        {            RunTime--;            //这两行代码都是输出显示            console.log(RunTime);            document.getElementById("lastTime").innerHTML = RunTime;            if (RunTime  {                html = parseInt(html) - 1;                if (parseInt(html)