JS實(shí)現(xiàn)頁(yè)面長(zhǎng)時(shí)間不操作退出到登錄頁(yè)面的示例代碼
頁(yè)面執(zhí)行
index.php
1、在head標(biāo)簽中引入jquey和頁(yè)面長(zhǎng)時(shí)間不操作的js頁(yè)面
<script src="./statics/base/js/jquery-1.8.3.min.js"></script> <script src="./js/sessionTimeout.js"></script>
2、頁(yè)面底部,在DOM加載完成之后調(diào)用初始化函數(shù)
<script>
$(document).ready(function() {
sessionTimeout.init();
});
</script>方法寫入
sessionTimeout.js
(function (window) {//立即調(diào)用的函數(shù)表達(dá)式
//設(shè)置時(shí)間,用戶無(wú)操作多久后觸發(fā)登出操作
// let inactivityTimeout = 30 * 60 * 1000; // 30分鐘
let inactivityTimeout = 5 * 1000; // 5秒鐘
//定義一個(gè)變量timer,用于保存setTimeout返回的ID值,以便在需要時(shí)清除定時(shí)器。
let timer;
// 定義一個(gè)名為init的常量函數(shù),用于初始化無(wú)操作超時(shí)功能,包括重置計(jì)時(shí)器和綁定事件監(jiān)聽器。
const init = function () {
resetInactivityTimeout();
bindEvents();
};
// 定義一個(gè)名為resetInactivityTimeout的常量函數(shù),用于清除當(dāng)前計(jì)時(shí)器并重新設(shè)置一個(gè)新的計(jì)時(shí)器,如果inactivityTimeout內(nèi)沒(méi)有用戶活動(dòng),則執(zhí)行登出操作。
const resetInactivityTimeout = function () {
// 清除當(dāng)前存在的計(jì)時(shí)器。
clearTimeout(timer);
// 設(shè)置一個(gè)新的計(jì)時(shí)器,等待inactivityTimeout指定的毫秒數(shù)后執(zhí)行l(wèi)ogout函數(shù)。
timer = setTimeout(logout, inactivityTimeout);
};
// 定義一個(gè)名為bindEvents的常量函數(shù),用于綁定鼠標(biāo)移動(dòng)、按鍵和鼠標(biāo)點(diǎn)擊等事件,當(dāng)這些事件發(fā)生時(shí),調(diào)用resetInactivityTimeout函數(shù)重置計(jì)時(shí)器。
const bindEvents = function () {
// 監(jiān)聽鼠標(biāo)移動(dòng)事件,每當(dāng)鼠標(biāo)移動(dòng)時(shí),重置計(jì)時(shí)器。
document.addEventListener('mousemove', resetInactivityTimeout);
// 監(jiān)聽鍵盤按鍵事件,每當(dāng)用戶按下鍵盤鍵時(shí),重置計(jì)時(shí)器。
document.addEventListener('keydown', resetInactivityTimeout);
// 監(jiān)聽鼠標(biāo)點(diǎn)擊事件,每當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí),重置計(jì)時(shí)器。
document.addEventListener('mousedown', resetInactivityTimeout);
};
// 定義一個(gè)名為logout的常量函數(shù),用于執(zhí)行登出操作。
const logout = function () {
// 清除本地存儲(chǔ)的信息并跳轉(zhuǎn)到登錄頁(yè)面
// localStorage.removeItem('access_token');
// 當(dāng)調(diào)用logout函數(shù)時(shí),將頁(yè)面URL更改為'./Logout.php',從而實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)并登出系統(tǒng)。
window.location.href = './Logout.php';
};
// 初始化函數(shù)。檢查全局window對(duì)象上是否存在名為sessionTimeout的屬性。如果不存在,則將其定義為一個(gè)包含init方法的對(duì)象。
if (typeof window.sessionTimeout === 'undefined') {
// 將init函數(shù)作為一個(gè)屬性掛載到全局sessionTimeout對(duì)象上,使得在各頁(yè)面中可以通過(guò)sessionTimeout.init()來(lái)啟用無(wú)操作超時(shí)自動(dòng)登出功能。
window.sessionTimeout = {
init: init
};
}
})(window);到此這篇關(guān)于JS實(shí)現(xiàn)頁(yè)面長(zhǎng)時(shí)間不操作退出到登錄頁(yè)面的文章就介紹到這了,更多相關(guān)js長(zhǎng)時(shí)間不操作退出登錄頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript將時(shí)間戳轉(zhuǎn)換為日期格式的多種轉(zhuǎn)換方法
在 JavaScript 中,將時(shí)間戳轉(zhuǎn)換為日期格式是一個(gè)常見需求,可以通過(guò)原生 Date 對(duì)象、日期格式化方法或第三方庫(kù)現(xiàn),以下是詳細(xì)的中文講解,介紹多種轉(zhuǎn)換方法,包含代碼示例、使用場(chǎng)景和注意事項(xiàng),需要的朋友可以參考下2025-12-12
JS網(wǎng)頁(yè)圖片按比例自適應(yīng)縮放實(shí)現(xiàn)方法
這篇文章主要介紹了JS網(wǎng)頁(yè)圖片按比例自適應(yīng)縮放實(shí)現(xiàn)方法,有需要的朋友可以參考一下2014-01-01
詳解JavaScript中的數(shù)組合并方法和對(duì)象合并方法
這篇文章主要介紹了JavaScript中的數(shù)組合并方法和對(duì)象合并方法,通過(guò)代碼的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-05-05
javascript 操作文件 實(shí)現(xiàn)方法小結(jié)
可以通過(guò)瀏覽器在訪問(wèn)者的硬盤上創(chuàng)建文件 JavaScript操作文件系統(tǒng)創(chuàng)建快捷方式2009-07-07
發(fā)布BlueShow v1.0 圖片瀏覽器(類似lightbox)blueshow.js 打包下載
發(fā)布BlueShow v1.0 圖片瀏覽器(類似lightbox)blueshow.js 打包下載...2007-07-07
javascript 就地編輯實(shí)現(xiàn)代碼
最近正在看《javascript設(shè)計(jì)模式》,其中有一個(gè)'就地編輯'的示例,用來(lái)表現(xiàn)不同的繼承方式,看完之后想自己憑理解寫一個(gè)類似的東西。2010-05-05

