快捷導(dǎo)航

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

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

在一些學(xué)習(xí)系統(tǒng)，或者考試系統(tǒng)中。一旦出現(xiàn)長(zhǎng)時(shí)間未操作，就會(huì)判定這個(gè)人不在場(chǎng)。所以就會(huì)進(jìn)行退出系統(tǒng)，處于對(duì)安全和系統(tǒng)負(fù)擔(dān)還有業(yè)務(wù)的需求。本文就來(lái)用JavaScript做一個(gè)系統(tǒng)防掛機(jī)功能，需要的可以參考一下

介紹

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

簡(jiǎn)單講：這個(gè)功能，就像你打游戲的時(shí)候長(zhǎng)時(shí)間不操作，就會(huì)有請(qǐng)你認(rèn)真對(duì)待游戲的彈框，讓你認(rèn)真對(duì)待游戲的意思。

動(dòng)圖演示

正常演示

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

操作頁(yè)面則，重置其他的倒計(jì)時(shí)

實(shí)現(xiàn)原理

1，分別定義倒計(jì)時(shí)定時(shí)器和警告定時(shí)器

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

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

4，警告定時(shí)器存在時(shí)

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

難點(diǎn)

1，當(dāng)出現(xiàn)多個(gè)頁(yè)面的時(shí)候，需要取最新操作的頁(yè)面的計(jì)時(shí)器為全局時(shí)間；

2，當(dāng)多個(gè)頁(yè)面同時(shí)出現(xiàn)倒計(jì)時(shí)警告時(shí)，關(guān)閉其中一個(gè)，則需要關(guān)閉所有警告提示；

3，當(dāng)A頁(yè)面先進(jìn)行倒計(jì)時(shí)，B頁(yè)面后進(jìn)行倒計(jì)時(shí)。如果A頁(yè)面結(jié)束，不允許關(guān)閉或退出系統(tǒng)！（因?yàn)锽頁(yè)面沒(méi)有結(jié)束）

代碼實(shí)現(xiàn)

因?yàn)榉罀鞕C(jī)，無(wú)操作彈框的需求邏輯一樣，無(wú)論哪種語(yǔ)言都是一樣的邏輯，這里就只用js進(jìn)行代碼演示。雖然但是，備注寫(xiě)的是很詳細(xì)的。

初始化變量

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

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

開(kāi)始倒計(jì)時(shí)的方法

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

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

核心方法

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

            if (RunTime <= 0) {

                //正常倒計(jì)時(shí)結(jié)束，將IsReset賦值2，使其他標(biāo)簽看到就提前彈框告知是否繼續(xù)使用?。?！
                var isReset = window.localStorage.setItem("IsReset", 2);
                clearInterval(StayTimer);

                //開(kāi)啟警告倒計(jì)時(shí)
                document.getElementsByClassName("fullScreenDiv")[0].style.display = "block";
                document.getElementsByClassName("promptDiv")[0].style.display = "block";
                startCountDown(document.getElementById("spanCountDown").innerText);

            }

            //檢測(cè)別的頁(yè)面是否有操作，有則刷新當(dāng)前頁(yè)的倒計(jì)時(shí)；
            var isReset = window.localStorage.getItem("IsReset");
            if (isReset == 1) {
                SetTimer();
                //延遲1秒后，執(zhí)行刪除；（延遲的作用是為了使其充分的刪除所有標(biāo)簽頁(yè)的警告）
                setTimeout(function () {
                    window.localStorage.removeItem('IsReset');
                }, 1000);
            }
            //如果IsReset=2，證明其他標(biāo)簽的倒計(jì)時(shí)結(jié)束了，此時(shí)本標(biāo)簽也彈框。讓用戶進(jìn)行選擇關(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);
            }
        }

重置倒計(jì)時(shí)任務(wù)

function resetTimer() {
    var isReset = window.localStorage.setItem("IsReset", 1);
    TimeSwich = false;
    SetTimer();
}

開(kāi)啟警告倒計(jì)時(shí)的方法

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)閉和重置警告倒計(jì)時(shí)的方法

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("你已封號(hào)！");
        }

        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>防掛機(jī)</title>
</head>
<body>

    <!--監(jiān)控頁(yè)面-->
    <div id="myFrame" style="background-color: palegreen; margin-left: 20%; width: 900px; height: 900px">
        <span id="lastTime">：</span>
        <span>second</span>
        <p>ps：劃過(guò)或點(diǎn)擊綠色方塊則會(huì)重置倒計(jì)時(shí)時(shí)間。</p>
    </div>

    <!--警告倒計(jì)時(shí)頁(yè)面-->
    <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;">請(qǐng)積極對(duì)待游戲</span>
            <span class="countDown" id="spanCountDown" style="margin-bottom: 50px;">7</span>
        </div>

    </div>


    <!--<script >-->
    <script type="text/javascript">

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

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

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

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

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

            if (RunTime <= 0) {

                //正常倒計(jì)時(shí)結(jié)束，將IsReset賦值2，使其他標(biāo)簽看到就提前彈框告知是否繼續(xù)使用?。?！
                var isReset = window.localStorage.setItem("IsReset", 2);
                clearInterval(StayTimer);

                //開(kāi)啟警告倒計(jì)時(shí)
                document.getElementsByClassName("fullScreenDiv")[0].style.display = "block";
                document.getElementsByClassName("promptDiv")[0].style.display = "block";
                startCountDown(document.getElementById("spanCountDown").innerText);

            }

            //檢測(cè)別的頁(yè)面是否有操作，有則刷新當(dāng)前頁(yè)的倒計(jì)時(shí)；
            var isReset = window.localStorage.getItem("IsReset");
            if (isReset == 1) {
                SetTimer();
                //延遲1秒后，執(zhí)行刪除；（延遲的作用是為了使其充分的刪除所有標(biāo)簽頁(yè)的警告）
                setTimeout(function () {
                    window.localStorage.removeItem('IsReset');
                }, 1000);
            }
            //如果IsReset=2，證明其他標(biāo)簽的倒計(jì)時(shí)結(jié)束了，此時(shí)本標(biāo)簽也彈框。讓用戶進(jìn)行選擇關(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);
            }
        }

        //增加操作對(duì)象時(shí)所綁定的監(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("你已封號(hào)！");
        }

        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 { /*倒計(jì)時(shí)關(guān)閉提示框*/
            color: red;
            font-size: 28px;
        }
    </style>


</body>
</html>

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

您可能感興趣的文章: