當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

原生js制作页面长时间未操作退出登录

發布時間：2023/12/31 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了原生js制作页面长时间未操作退出登录小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

昨天一個同事問我，進入到一個頁面后，這個時候不進行任何操作，然后15分鐘后就自動退出登錄，這個功能怎么實現？

電腦進入待機狀態原理

說到這個問題，我覺得這個問題和電腦長時間未操作進入待機狀態是一個原理，于是查了一下，發現電腦待機原理其實并不是在應用層進行控制的，而是通過相關電壓和電流的判斷來讓電腦進入待機狀態的。

自動退出登陸是什么原理呢？

其實不然，自動退出主要是通過判斷鍵盤鼠標有沒有操作來判斷電腦的狀態的。

所以具體原理： 獲取鼠標和鍵盤 onmousemove 和 onkeydown 兩個事件最后一次操作時間。這個時候你需要設置一個超時時間，接下來在判斷兩個事件最后一次的時間，和當前時間相比較。如果這個時間大于你設置的這個時間，則說明這個時候已經很久沒有操作電腦了，你可以選擇讓用戶退出登陸了。

<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>頁面無任何操作30秒后退出</title> <script language="JavaScript">var timerIdle=0; //空閑時間 var timerBusy=0; //倒計時開始 var timerIdle1=5; //系統參數定義超時時間 var timerBusy1=30; //退出時間function timerTimeout(){timerIdle++;if (timerIdle>timerIdle1){if (timerBusy==0){timerBusy=timerBusy1+1;//view timerUIdocument.getElementById("timerUI").style.display="inline"; }timerBusy--;//view timerBusydocument.getElementById("_timerBusy").innerHTML=timerBusy;if (timerBusy<=0){timerExit();return;}}else{timerBusy=0;}window.setTimeout("timerTimeout()",1000); }function timerUser(){//讓div消失timerIdle=0;document.getElementById("timerUI").style.display="none";}function timerExit(){//超時處理.這里可以寫自己需要執行的方法...document.getElementById("_timerBusy").innerHTML="Timeout";}window.setTimeout("timerTimeout()",1000);function mouseMove(ev){ev= ev || window.event;timerUser();var mousePos = mouseCoords(ev);}function mouseCoords(ev){if(ev.pageX || ev.pageY){return {x:ev.pageX, y:ev.pageY};}return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop}; }document.onmousemove = mouseMove;document.onkeydown = mouseMove;</script> </head> <body> <div id="timerUI" style="position:absolute; left:30px; top:30px; font-size:20px;"> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td nowrap="" align="right" id="_timerBusy" style=" font-size:36px; font-weight:bold; color:#FF0000;"></td> <td nowrap="" align="left"> 秒后將退出系統</td> </tr> <tr> <td nowrap="" align="right"></td> <td nowrap="" align="right"></td> <td nowrap="" align="left"> 如繼續操作點任意鍵即可</td> </tr> <tr> <td nowrap="" align="right"></td> <td nowrap="" align="right"></td> <td nowrap="" align="left"> (系統檢測到您長時間未進行任何操作,為保護您的信息安全將自動退出)</td> </tr> </tbody></table> </div> </body> </html>

總結

以上是生活随笔為你收集整理的原生js制作页面长时间未操作退出登录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。