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

2.思路
- 首先需要一個(gè)變量isLock表示頁面是否鎖定。由于多個(gè)頁面需要共享這個(gè)數(shù)據(jù),且刷新后依然能夠獲取到,所以我使用了localStorage儲存在本地。isLock為true的時(shí)候就展示鎖屏樣式。
- 設(shè)置一個(gè)定時(shí)器 setTimeout,比如代碼中設(shè)置頁面無操作n秒后鎖屏,那么n秒后執(zhí)行鎖屏操作lockPro(),即var timer = setTimeout(lockPro, n)
- 需要監(jiān)測window的mousemove事件,監(jiān)測用戶鼠標(biāo)移動動作,判斷屏幕有沒有被鎖定,如果已經(jīng)鎖定,則不做任何操作,如果屏幕還沒有鎖定,需要設(shè)置一個(gè)變量moveTime記錄每次鼠標(biāo)移動時(shí)的時(shí)間,并保存到localStorage中,并且清除定時(shí)器timer,重新計(jì)時(shí)。
- setInterval輪詢監(jiān)聽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.vue
data () {
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ài)
setInterval(this.modalStatus, 1000)
// 監(jiān)聽鼠標(biāo)事件
this.events()
},
methods:{
events() {
window.onmousemove = () => {
// console.log('鼠標(biāo)移動了')
if (!this.isLock) {
localStorage.setItem('moveTime', Date.now())
this.clearLocaPro('continue')
}
}
},
modalStatus() {
if (localStorage.getItem('isLock') === 'true') {
// console.log('鎖屏了')
this.isLock = true
this.clearLocaPro()
} else {
// console.log('當(dāng)前沒鎖屏')
this.isLock = false
this.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)
}
},
// 手動鎖定
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)自動鎖屏功能的文章就介紹到這了,更多相關(guān)js 自動鎖屏 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript中offsetWidth的bug及解決方法
這篇文章主要為大家詳細(xì)介紹了JavaScript中offsetWidth的bug及解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
javascript實(shí)時(shí)顯示北京時(shí)間的方法
這篇文章主要介紹了javascript實(shí)時(shí)顯示北京時(shí)間的方法,涉及javascript操作時(shí)間顯示的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
javascript中parseInt()函數(shù)的定義和用法分析
這篇文章主要介紹了javascript中parseInt()函數(shù)的定義和用法,較為詳細(xì)的分析了parseInt()函數(shù)的定義及具體用法,以及參數(shù)使用時(shí)的注意事項(xiàng),需要的朋友可以參考下2014-12-12
webpack4升級到webpack5的實(shí)戰(zhàn)經(jīng)驗(yàn)總結(jié)
有些老項(xiàng)目的包長時(shí)間沒有更新,導(dǎo)致項(xiàng)目中有些性能問題,在項(xiàng)目迭代中考慮升級包,下面這篇文章主要給大家介紹了關(guān)于webpack4升級到webpack5的實(shí)戰(zhàn)經(jīng)驗(yàn),需要的朋友可以參考下2022-08-08
JavaScript時(shí)間操作之年月日星期級聯(lián)操作
這篇文章主要介紹了JavaScript時(shí)間操作之級聯(lián)日期選擇操作,涉及到年、月、日、星期,感興趣的小伙伴們可以參考一下2016-01-01

