前端簡單實現校招筆試'作弊監聽'功能
阿新 • • 發佈：2018-08-28
end 樂視 系統 hidden 清除 sel 不可見 thead 可見
一、 監聽你的頁面活動
最近校招筆試如火如荼地開展。各種小心思都浮上來了:"我就查一道".小心翼翼按了一下tab切換(mac用三爪),Document.visibilityState開始工作了."監測到你切換頁面,超過xx次將影響你的成績(希望你自重)"
二、 visibilityState
| 值 | 描述 |
|---|---|
| visible | 此時頁面內容至少是部分可見. 即此頁面在前景標簽頁中，並且窗口沒有最小化. |
| hidden | 此時頁面對用戶不可見. 即文檔處於背景標簽頁或者窗口處於最小化狀態，或者操作系統正處於 ‘鎖屏狀態‘ . |
| prerender | 頁面此時正在渲染中, 文檔只能從此狀態開始，永遠不能從其他值變為此狀態. |
| unloaded | 頁面從內存中卸載清除 |
當此屬性的值改變時, 會遞交 visibilitychange 事件給Document.
三、visibilitychange用法
當頁面離開的時候,visibilityState值也會相應改變,只需要在監聽事件上做判斷即可
實現‘作弊監聽‘功能,監聽用戶離開頁面的時間和次數
<script> let leaveTime; let inTime; let num = 0; document.addEventListener(‘visibilitychange‘,function(e){ console.log(document.visibilityState); let state = document.visibilityState if(state == ‘hidden‘){ leaveTime = (new Date()).getTime(); num++; } if(state == ‘visible‘){ inTime = (new Date()).getTime(); let time = (Number(inTime) - Number(leaveTime))/1000; alert(‘用戶離開了:‘ + time + ‘s‘ + ‘\n‘ + ‘用戶離開了:‘ + num + ‘次‘) } }) </script>
效果圖:
解析一下步驟:
首先定義幾個全局變量,不用全局變量的話每次監聽更改的時候,未賦值的值會報underfine。
leaveTime:用戶離開頁面的時間. 用getTime()獲取毫秒
inTime:用戶進入頁面的時間.
num:記錄用戶離開次數通過不同的參數執行不同的操作
state為hidden的時候表示離開頁面,記錄離開時間,並且記錄次數
state為visible的時候表示回來頁面,記錄回來時間,返回時間差和次數
一個簡單的監聽離開事件就完成啦！
四、利用visibilityState實現離開頁面暫停播放音樂(視頻)功能
<body> <video style="width:600px" controls> <source src="tvb.mp4" type="video/mp4"> 瀏覽器不支持 video 標簽。 </video> <script> document.addEventListener(‘visibilitychange‘,function(e){ let state = document.visibilityState; if(state == ‘hidden‘){ document.querySelector(‘video‘).pause(); } }) </script> </body>
效果:
打開頁面 播放視頻
切換頁面(mac三爪滑過)
前端簡單實現校招筆試'作弊監聽'功能