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

  • 系统防挂机 | 无操作弹框(所有你想要需求的都有)已关闭评论
  • 18 次浏览
  • A+
所属分类:.NET技术
摘要

    在一些学习系统,或者考试系统中。一旦出现长时间未操作,就会判定这个人不在场。所以就会进行退出系统,处于对安全和系统负担还有业务的需求。


背景:

介绍:

    在一些学习系统,或者考试系统中。一旦出现长时间未操作,就会判定这个人不在场。所以就会进行退出系统,处于对安全和系统负担还有业务的需求

  简单讲:这个功能,就像你打游戏的时候长时间不操作,就会有请你认真对待游戏的弹框,让你认真对待游戏的意思。

动图演示:

  正常演示

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

 

 

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

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

 

 

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

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

 

 

    

实现原理:

    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>