溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么用HTML+JS實現監控切屏功能”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“怎么用HTML+JS實現監控切屏功能”文章能幫助大家解決問題。
項目要求做到
監控網頁狀態
記錄離開次數
離開時間
實現這個切換頁面功能需要用到一個web的APIvisiblitychange
visibilitychange - Web API 接口參考 | MDN (mozilla.org)
Document.visibilityState - Web API 接口參考 | MDN (mozilla.org)
document.addEventListener("visibilitychange", function() {
console.log( document.visibilityState );
});大致就是通過監聽visiblitychange獲取當前的狀態，根據狀態document.visibilityState去操作
創建一個標準的html頁面
<!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>第一個標簽</title>
</head>
<body>
<h2>這是第一個標簽頁</h2>
<script>
document.addEventListener('visibilitychange' , () => {
let state = document.visibilityState
if(state == "hidden") {
document.title = "我知道，你切換標簽頁了--tab1"
} else {
document.title = "嘻嘻，你又回來了"
}
})
</script>
</body>
</html>
根據MDN對state的陳述，visible對部分可見也會觸發，所以對于分屏監控是無法監測到的
所以需要監控另一個狀態是否foucus，即是否是去當前頁面的焦點
window.onblur = () => {
document.title = "你居然還切屏？？？--tab1"
}
window.onfocus = () => {
document.title = "好吧，你回來了--tab1"
}
放置一個標志位，查看是否是觸發切屏或者切換標簽頁，并保存此時的時間戳
當下一次重新觸發的時候，顯示切屏時間
由于多次出現多次，所以封裝成一個函數
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
}
}
不管是切屏還是離開新建標簽頁都需要進行計時，而且不會因為刷新而中斷
由此想到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);
}
關于“怎么用HTML+JS實現監控切屏功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
