亲宝软件园·资讯

展开

JavaScript实现系统防挂机(无操作弹窗)的示例详解

CoolDog; 人气:0

介绍

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

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

动图演示

正常演示

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

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

实现原理

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>

加载全部内容
相关教程
猜你喜欢
用户评论