1.使用場(chǎng)景

有這么一個(gè)需求，開(kāi)發(fā)了一套系統(tǒng)，當(dāng)用戶離開(kāi)桌面或者一段時(shí)間不操作的話，需要把該系統(tǒng)所有打開(kāi)頁(yè)面鎖定起來(lái)，就跟桌面鎖屏一樣，只能輸入密碼驗(yàn)證成功后，或者重新登錄，才可以繼續(xù)操作頁(yè)面，如果刷新頁(yè)面，也要保持鎖定。就像下圖一樣。當(dāng)然用戶也可以手動(dòng)觸發(fā)鎖屏。目的是防止他人隨意操作系統(tǒng)的重要內(nèi)容。那么該如何去實(shí)現(xiàn)呢？

5s鎖屏效果如下：

2.思路 首先需要一個(gè)變量isLock表示頁(yè)面是否鎖定。由于多個(gè)頁(yè)面需要共享這個(gè)數(shù)據(jù)，且刷新后依然能夠獲取到，所以我使用了localStorage儲(chǔ)存在本地。isLock為true的時(shí)候就展示鎖屏樣式。 設(shè)置一個(gè)定時(shí)器 setTimeout，比如代碼中設(shè)置頁(yè)面無(wú)操作n秒后鎖屏，那么n秒后執(zhí)行鎖屏操作lockPro()，即var timer = setTimeout(lockPro, n) 需要監(jiān)測(cè)window的mousemove事件，監(jiān)測(cè)用戶鼠標(biāo)移動(dòng)動(dòng)作，判斷屏幕有沒(méi)有被鎖定，如果已經(jīng)鎖定，則不做任何操作，如果屏幕還沒(méi)有鎖定，需要設(shè)置一個(gè)變量moveTime記錄每次鼠標(biāo)移動(dòng)時(shí)的時(shí)間，并保存到localStorage中，并且清除定時(shí)器timer，重新計(jì)時(shí)。 setInterval輪詢監(jiān)聽(tīng)isLock，每1s獲取一次，以便及時(shí)拿到鎖屏狀態(tài)。 鎖屏操作lockPro，判斷當(dāng)前時(shí)間與上次鼠標(biāo)操作的時(shí)間即moveTime的差值，如果小于n秒，則認(rèn)為不需要鎖屏，如果大于等于n秒，則需要鎖屏，并更新鎖屏狀態(tài)isLock 判斷狀態(tài)為鎖定后，清除定時(shí)器timer，結(jié)束定時(shí)任務(wù)。 判斷狀態(tài)為未鎖定后，重置定時(shí)器，即先清除timer，再設(shè)置一個(gè)timer 退出登錄時(shí)，清除本地緩存isLock。 密碼解鎖時(shí)，清除本地緩存isLock，重新設(shè)置moveTime，重置定時(shí)器。

有點(diǎn)繞，需要好好捋一捋。

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

以下代碼是不完全代碼，html結(jié)構(gòu)省略了，大家自由發(fā)揮。

// app.vuedata () { return { timeOut: 5000, timer: null, isLock: ’false’ }},mounted () { this.timer = setTimeout(this.lockPro, this.timeOut) // 首次設(shè)置操作時(shí)間 localStorage.setItem(’moveTime’, Date.now()) // 首次判斷狀態(tài) this.modalStatus() // 輪詢監(jiān)聽(tīng)狀態(tài) setInterval(this.modalStatus, 1000) // 監(jiān)聽(tīng)鼠標(biāo)事件 this.events()},methods:{ events() { window.onmousemove = () => {// console.log(’鼠標(biāo)移動(dòng)了’)if (!this.isLock) { localStorage.setItem(’moveTime’, Date.now()) this.clearLocaPro(’continue’)} } }, modalStatus() { if (localStorage.getItem(’isLock’) === ’true’) {// console.log(’鎖屏了’)this.isLock = truethis.clearLocaPro() } else {// console.log(’當(dāng)前沒(méi)鎖屏’)this.isLock = falsethis.clearLocaPro(’continue’) } }, lockPro() { if (!this.timeOut) {localStorage.setItem(’isLock’, ’false’)this.clearLocaPro(’continue’)return } if (Date.now() - localStorage.getItem(’moveTime’) < this.timeOut) {localStorage.setItem(’isLock’, ’false’)this.clearLocaPro(’continue’) } else {localStorage.setItem(’isLock’, ’true’)this.clearLocaPro() } }, clearLocaPro(status) { if(this.timer){ clearTimeout(this.timer) } if (status === ’continue’) {this.timer = setTimeout(this.lockPro, this.timeOut) } }, // 手動(dòng)鎖定 handleLock(){ this.clearLocaPro() localStorage.setItem(’isLock’, ’true’) }, // 密碼解鎖 unlock(){ localStorage.removeItem(’isLock’) localStorage.setItem(’moveTime’, Date.now()) this.clearLocaPro(’continue’) }， ... // 別忘了退出登錄也要清除isLock}

到此這篇關(guān)于js實(shí)現(xiàn)自動(dòng)鎖屏功能的文章就介紹到這了,更多相關(guān)js 自動(dòng)鎖屏 內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！