快捷導航

JavaScript實現(xiàn)系統(tǒng)防掛機(無操作彈窗)的示例詳解

更新時間：2023年01月09日 14:05:46 作者：CoolDog;

在一些學習系統(tǒng)，或者考試系統(tǒng)中。一旦出現(xiàn)長時間未操作，就會判定這個人不在場。所以就會進行退出系統(tǒng)，處于對安全和系統(tǒng)負擔還有業(yè)務(wù)的需求。本文就來用JavaScript做一個系統(tǒng)防掛機功能，需要的可以參考一下

介紹

在一些學習系統(tǒng)，或者考試系統(tǒng)中。一旦出現(xiàn)長時間未操作，就會判定這個人不在場。所以就會進行退出系統(tǒng)，處于對安全和系統(tǒng)負擔還有業(yè)務(wù)的需求。

簡單講：這個功能，就像你打游戲的時候長時間不操作，就會有請你認真對待游戲的彈框，讓你認真對待游戲的意思。

動圖演示

正常演示

關(guān)閉一個警告，即關(guān)閉所有

操作頁面則，重置其他的倒計時

實現(xiàn)原理

1，分別定義倒計時定時器和警告定時器

2，定義監(jiān)控區(qū)域，或者監(jiān)控接口時觸發(fā)重置定時器任務(wù)

3，倒計時定時器執(zhí)行結(jié)束后，調(diào)用警告定時器任務(wù)

4，警告定時器存在時

如果關(guān)閉窗口則重啟定時器　
如果不操作則會退出登錄等業(yè)務(wù)操作

難點

1，當出現(xiàn)多個頁面的時候，需要取最新操作的頁面的計時器為全局時間；

2，當多個頁面同時出現(xiàn)倒計時警告時，關(guān)閉其中一個，則需要關(guān)閉所有警告提示；

3，當A頁面先進行倒計時，B頁面后進行倒計時。如果A頁面結(jié)束，不允許關(guān)閉或退出系統(tǒng)?。ㄒ驗锽頁面沒有結(jié)束）

代碼實現(xiàn)

因為防掛機，無操作彈框的需求邏輯一樣，無論哪種語言都是一樣的邏輯，這里就只用js進行代碼演示。雖然但是，備注寫的是很詳細的。

初始化變量

//定義全局變量
        var Min = 1; //可以設(shè)置動態(tài)讀取
        var RunTime = 0; //進行中的時間，單位秒
        var StayTimer = null;//全局定時器
        var WarningTimer = null;//警告的定時器
        var TimeSwich = false;//防止重復啟動（重復啟動會導致多讀了3秒）
        test = 0;//測試變量（不影響整體邏輯）

        //定義監(jiān)控范圍（綠色方塊）
        var vdoc = document.getElementById("myFrame");
        setDocumentEventListener(vdoc);
        //開局執(zhí)行一次
        resetTimer();

開始倒計時的方法

function SetTimer() {           
            /*if (TimeSwich = true;)*/
            clearInterval(StayTimer);
            //設(shè)置定時任務(wù)的時間
            RunTime = Number(Min * 12);

            test = 111;
            //設(shè)置定時任務(wù)；
            StayTimer = setInterval(() => {
                /*TimeSwich = true;*/
                timeOut();
            }, 1000);
            //random()
        }

核心方法

function timeOut()
        {
            RunTime--;
            //這兩行代碼都是輸出顯示
            console.log(RunTime);
            document.getElementById("lastTime").innerHTML = RunTime;

            if (RunTime <= 0) {

                //正常倒計時結(jié)束，將IsReset賦值2，使其他標簽看到就提前彈框告知是否繼續(xù)使用！?。?
                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秒后，執(zhí)行刪除；（延遲的作用是為了使其充分的刪除所有標簽頁的警告）
                setTimeout(function () {
                    window.localStorage.removeItem('IsReset');
                }, 1000);
            }
            //如果IsReset=2，證明其他標簽的倒計時結(jié)束了，此時本標簽也彈框。讓用戶進行選擇關(guān)閉還是繼續(xù)；
            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);
            }
        }

重置倒計時任務(wù)

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秒后執(zhí)行刷新
                        window.localStorage.removeItem('checkClose');
                    }, 1000); //單位是毫秒
                }

            }, 1000);
        }

關(guān)閉和重置警告倒計時的方法

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>

    <!--監(jiān)控頁面-->
    <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; //可以設(shè)置動態(tài)讀取
        var RunTime = 0; //進行中的時間，單位秒
        var StayTimer = null;//全局定時器
        var WarningTimer = null;//警告的定時器
        var TimeSwich = false;//防止重復啟動（重復啟動會導致多讀了3秒）
        test = 0;//測試變量（不影響整體邏輯）

        //定義監(jiān)控范圍（綠色方塊）
        var vdoc = document.getElementById("myFrame");
        setDocumentEventListener(vdoc);
        //開局執(zhí)行一次
        resetTimer();

        function SetTimer() {           
            /*if (TimeSwich = true;)*/
            clearInterval(StayTimer);
            //設(shè)置定時任務(wù)的時間
            RunTime = Number(Min * 12);

            test = 111;
            //設(shè)置定時任務(wù)；
            StayTimer = setInterval(() => {
                /*TimeSwich = true;*/
                timeOut();
            }, 1000);
            //random()
        }

      
        function timeOut()
        {
            RunTime--;
            //這兩行代碼都是輸出顯示
            console.log(RunTime);
            document.getElementById("lastTime").innerHTML = RunTime;

            if (RunTime <= 0) {

                //正常倒計時結(jié)束，將IsReset賦值2，使其他標簽看到就提前彈框告知是否繼續(xù)使用?。。?
                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秒后，執(zhí)行刪除；（延遲的作用是為了使其充分的刪除所有標簽頁的警告）
                setTimeout(function () {
                    window.localStorage.removeItem('IsReset');
                }, 1000);
            }
            //如果IsReset=2，證明其他標簽的倒計時結(jié)束了，此時本標簽也彈框。讓用戶進行選擇關(guān)閉還是繼續(xù)；
            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);
            }
        }

        //增加操作對象時所綁定的監(jiān)控事件；
        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秒后執(zhí)行刷新
                        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 { /*倒計時關(guān)閉提示框*/
            color: red;
            font-size: 28px;
        }
    </style>


</body>
</html>

到此這篇關(guān)于JavaScript實現(xiàn)系統(tǒng)防掛機(無操作彈窗)的示例詳解的文章就介紹到這了,更多相關(guān)JavaScript系統(tǒng)防掛機內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: