HTML+JS實(shí)現(xiàn)監(jiān)控切屏功能
項(xiàng)目描述
該項(xiàng)目是我在網(wǎng)上看其他博客的時(shí)候無(wú)意中看到的,看見(jiàn)別人居然能實(shí)現(xiàn)這種操作很好奇
項(xiàng)目要求做到
- 監(jiān)控網(wǎng)頁(yè)狀態(tài)
- 記錄離開(kāi)次數(shù)
- 離開(kāi)時(shí)間
記錄離開(kāi)頁(yè)面
實(shí)現(xiàn)這個(gè)切換頁(yè)面功能需要用到一個(gè)web的APIvisiblitychange
visibilitychange - Web API 接口參考 | MDN (mozilla.org)
Document.visibilityState - Web API 接口參考 | MDN (mozilla.org)
document.addEventListener("visibilitychange", function() { console.log( document.visibilityState ); });
大致就是通過(guò)監(jiān)聽(tīng)visiblitychange獲取當(dāng)前的狀態(tài),根據(jù)狀態(tài)document.visibilityState去操作
創(chuàng)建html
創(chuàng)建一個(gè)標(biāo)準(zhǔn)的html頁(yè)面
監(jiān)控是否離開(kāi)頁(yè)面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第一個(gè)標(biāo)簽</title> </head> <body> <h1>這是第一個(gè)標(biāo)簽頁(yè)</h1> <script> document.addEventListener('visibilitychange' , () => { let state = document.visibilityState if(state == "hidden") { document.title = "我知道,你切換標(biāo)簽頁(yè)了--tab1" } else { document.title = "嘻嘻,你又回來(lái)了" } }) </script> </body> </html>
監(jiān)控是否切屏
根據(jù)MDN對(duì)state的陳述,visible
對(duì)部分可見(jiàn)也會(huì)觸發(fā),所以對(duì)于分屏監(jiān)控是無(wú)法監(jiān)測(cè)到的
所以需要監(jiān)控另一個(gè)狀態(tài)是否foucus
,即是否是去當(dāng)前頁(yè)面的焦點(diǎn)
window.onblur = () => { document.title = "你居然還切屏???--tab1" } window.onfocus = () => { document.title = "好吧,你回來(lái)了--tab1" }
記錄時(shí)間
放置一個(gè)標(biāo)志位,查看是否是觸發(fā)切屏或者切換標(biāo)簽頁(yè),并保存此時(shí)的時(shí)間戳
當(dāng)下一次重新觸發(fā)的時(shí)候,顯示切屏?xí)r間
由于多次出現(xiàn)多次,所以封裝成一個(gè)函數(shù)
let isCut = false let lastTime; function recordTime() { isCut = true lastTime = Date.now() } function showTimeDiff() { if (isCut) { let timeDiff = (Date.now() - lastTime) / 1000; // alert(`你切屏出去${timeDiff}`) console.log(timeDiff); isCut = false } }
離開(kāi)次數(shù)
不管是切屏還是離開(kāi)新建標(biāo)簽頁(yè)都需要進(jìn)行計(jì)時(shí),而且不會(huì)因?yàn)樗⑿露袛?/p>
由此想到sessionStorage
function countTimes() { let store = window.sessionStorage.getItem('leave-times') if( store === null) { window.sessionStorage.setItem('leave-times', 0) return } store ++; window.sessionStorage.setItem('leave-times' , store); }
到此這篇關(guān)于HTML+JS實(shí)現(xiàn)監(jiān)控切屏功能的文章就介紹到這了,更多相關(guān)JS監(jiān)控切屏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)當(dāng)前頁(yè)居中分頁(yè)效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)當(dāng)前頁(yè)居中分頁(yè)效果的方法,涉及javascript操作頁(yè)面元素與樣式的相關(guān)技巧,需要的朋友可以參考下2015-06-06原生javascript實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了原生javascript實(shí)現(xiàn)分頁(yè)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04后端代碼規(guī)范避免數(shù)組下標(biāo)越界
這篇文章主要為大家介紹了后端開(kāi)發(fā)中的代碼如何規(guī)范避免數(shù)組下標(biāo)越界示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06JS基于封裝函數(shù)實(shí)現(xiàn)的表格分頁(yè)完整示例
這篇文章主要介紹了JS基于封裝函數(shù)實(shí)現(xiàn)的表格分頁(yè),結(jié)合完整實(shí)例形式分析了javascript針對(duì)table表格數(shù)據(jù)的遍歷、讀取以及模擬分頁(yè)顯示的相關(guān)操作技巧,需要的朋友可以參考下2018-06-06JS使用replace()方法和正則表達(dá)式進(jìn)行字符串的搜索與替換實(shí)例
這篇文章主要介紹了JS使用replace()方法和正則表達(dá)式進(jìn)行字符串的搜索與替換實(shí)例,需要的朋友可以參考下2014-04-04js和html5實(shí)現(xiàn)手機(jī)端刮刮卡抽獎(jiǎng)效果完美兼容android/IOS
手機(jī)完美支持html5,所以如果手機(jī)端想要做個(gè)抽獎(jiǎng)模塊的話(huà),用刮刮卡抽獎(jiǎng)效果,相信這個(gè)互動(dòng)體驗(yàn)是非常棒的,本人親自完成,有錯(cuò)誤請(qǐng)大家指出2013-11-11javascript內(nèi)置對(duì)象Date案例總結(jié)分析
今天總結(jié)javascript內(nèi)置對(duì)象Date的使用,并且寫(xiě)一個(gè)重要的網(wǎng)頁(yè)倒計(jì)時(shí)的核心算法案例,有需要的朋友可以借鑒參考下希望能夠有所幫助,祝大家多多進(jìn)步2022-03-03微信小程序tabBar組件切換與下拉刷新實(shí)現(xiàn)詳解
tabBar相對(duì)而言用的還是比較多的,但是用起來(lái)并沒(méi)有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tabBar的相關(guān)資料,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10