HTML+JS实现监控切屏功能

更新时间：2022年03月02日 15:14:17 作者：qq_22841387

这篇文章主要介绍了如何利用HTML和JavaScript实现监控切屏功能，监控是否离开当前页面，文中的示例代码讲解详细，需要的可以参考一下

项目描述

该项目是我在网上看其他博客的时候无意中看到的，看见别人居然能实现这种操作很好奇

项目要求做到

监控网页状态
记录离开次数
离开时间

记录离开页面

实现这个切换页面功能需要用到一个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

创建一个标准的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>
    <h1>这是第一个标签页</h1>

    <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实现监控切屏功能的文章就介绍到这了,更多相关JS监控切屏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信小程序连续旋转动画（this.animation.rotate）详解
这篇文章主要介绍了微信小程序连续旋转动画（this.animation.rotate）详解的相关资料,需要的朋友可以参考下
2017-04-04
JS简单获取并修改input文本框内容的方法示例
这篇文章主要介绍了JS简单获取并修改input文本框内容的方法,结合实例形式分析了JavaScript针对页面元素的获取、赋值等相关操作技巧,需要的朋友可以参考下
2018-04-04
微信小程序template模板引入的问题小结
这篇文章主要介绍了微信小程序template模板引入的问题小结,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-07-07
js canvas实现滑块验证
这篇文章主要为大家详细介绍了js canvas实现滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
你需要知道的TypeScript高级类型总结
在开发过程中，为了应对多变的复杂场景，我们需要了解一下 TypeScript 的高级类型。本文就为大家整理了一些需要掌握的TypeScript高级类型，需要的可以参考一下
2022-08-08
JS常见构造模式实例对比分析
这篇文章主要介绍了JS常见构造模式,结合实例形式对比分析了工厂模式、构造函数模式、原型模式、寄生构造函数模式、稳妥构造函数模式等相关概念、原理、实现方法与相关操作技巧,需要的朋友可以参考下
2018-08-08
javascript特殊文本输入框网页特效
这篇文章主要为大家详细介绍了javascript特殊文本输入框网页特效,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
javascript实现验证身份证号的有效性并提示
下面分享的JS脚本是我用过的最完善的身份证号的验证程序了，因为只有真正的身份证号才能被通过，小伙伴们可以试试。直接复制运行。
2015-04-04
jquery将标签元素的高设为屏幕的百分比
这篇文章主要介绍了js将标签元素的高设为屏幕的百分比,需要的朋友可以参考下
2017-04-04
使用Fetch API时获取404错误的解决方案
在现代Web开发中,Fetch API 是用于执行网络请求的主要工具之一,它提供了一种基于Promise的简洁语法,使得异步操作更加直观和易于管理,本文将详细探讨在使用Fetch API时获取404错误的原因、如何检测和处理这些错误,以及最佳实践,需要的朋友可以参考下
2024-12-12