JavaScript實現(xiàn)系統(tǒng)防掛機(無操作彈窗)的示例詳解
更新時間：2023年01月09日 14:05:46 作者：CoolDog;
在一些學習系統(tǒng)，或者考試系統(tǒng)中。一旦出現(xiàn)長時間未操作，就會判定這個人不在場。所以就會進行退出系統(tǒng)，處于對安全和系統(tǒng)負擔還有業(yè)務的需求。本文就來用JavaScript做一個系統(tǒng)防掛機功能，需要的可以參考一下
介紹
在一些學習系統(tǒng)，或者考試系統(tǒng)中。一旦出現(xiàn)長時間未操作，就會判定這個人不在場。所以就會進行退出系統(tǒng)，處于對安全和系統(tǒng)負擔還有業(yè)務的需求。
簡單講：這個功能，就像你打游戲的時候長時間不操作，就會有請你認真對待游戲的彈框，讓你認真對待游戲的意思。
動圖演示
正常演示
關(guān)閉一個警告，即關(guān)閉所有
操作頁面則，重置其他的倒計時
實現(xiàn)原理
1，分別定義倒計時定時器和警告定時器
2，定義監(jiān)控區(qū)域，或者監(jiān)控接口時觸發(fā)重置定時器任務
3，倒計時定時器執(zhí)行結(jié)束后，調(diào)用警告定時器任務
4，警告定時器存在時
- 如果關(guān)閉窗口則重啟定時器
- 如果不操作則會退出登錄等業(yè)務操作
難點
1，當出現(xiàn)多個頁面的時候，需要取最新操作的頁面的計時器為全局時間；
2，當多個頁面同時出現(xiàn)倒計時警告時，關(guān)閉其中一個，則需要關(guān)閉所有警告提示；
3，當A頁面先進行倒計時，B頁面后進行倒計時。如果A頁面結(jié)束，不允許關(guān)閉或退出系統(tǒng)！（因為B頁面沒有結(jié)束）
代碼實現(xiàn)
因為防掛機，無操作彈框的需求邏輯一樣，無論哪種語言都是一樣的邏輯，這里就只用js進行代碼演示。雖然但是，備注寫的是很詳細的。
初始化變量
//定義全局變量
var Min = 1; //可以設置動態(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);
//設置定時任務的時間
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) {
//正常倒計時結(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);
}
}重置倒計時任務
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; //可以設置動態(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);
//設置定時任務的時間
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) {
//正常倒計時結(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)文章希望大家以后多多支持腳本之家！
JavaScript利用split函數(shù)按規(guī)定截取字符串(獲取郵箱用戶名)
這個其實就是利用了js的split函數(shù)，以@分割數(shù)組，一般用這個的地方不多，但這個思路應用的比較廣泛。推薦大家學習。
2009-12-12 
這篇文章主要介紹了antd項目如何實現(xiàn)彩蛋效果,首先在components目錄下創(chuàng)建Transform目錄，包括index.css、index.js，index.js是主要的邏輯代碼，下面對代碼進行分析，需要的朋友可以參考下
2022-09-09 
javascript檢測瀏覽器精簡版，需要的朋友可以參考下。
2010-03-03 
JS保留小數(shù)點(四舍五入、四舍六入)實現(xiàn)思路及實例
保留兩位小數(shù)：將浮點數(shù)四舍五入，取小數(shù)點后2位；如：2，會在2后面補上00.即2.00，感興趣的朋友看下具體的實現(xiàn)思路及代碼
2013-04-04 
本文主要介紹了JavaScript的數(shù)組操作，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02 
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串，這篇文章主要介紹了js中進行字符串替換的方法,需要的朋友可以參考下
2024-01-01 
Bootstrap modal 多彈窗之疊加關(guān)閉陰影遮罩問題的解決方法
這里也會遇到一次性關(guān)閉所有modal引起陰影遮罩的問題，也就是所有modal都關(guān)閉了，但是主頁面仍然被陰影遮罩。下面通過本文給大家分享解決方案，需要的朋友參考下吧
2017-02-02 
本篇文章是對使用javascript過濾html的字符串進行了詳細的分析介紹，需要的朋友參考下
2013-07-07 
BootStrap daterangepicker 雙日歷控件
這篇文章主要介紹了BootStrap daterangepicker 雙日歷控件,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-06-06