HTML+JS实现监控切屏功能

2024-07-29 17:16:07

项目描述

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

项目要求做到

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

记录离开页面

实现这个切换页面功能需要用到一个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监控切屏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JS监控关闭浏览器操作的实例详解

JS监控关闭浏览器操作的实例详解需求如下: 用户关闭浏览器通知后台. 方案如下: 1.采用js监控关闭浏览器操作. 2.用户关闭浏览器的时候发ajax请求到后台,执行相应的业务操作代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &l
JavaScript 监控微信浏览器且自带返回按钮时间

比如现在有一个操作是 A->B->C->B 在B页面的返回键第一次返回的是C 如果想直接返回A或者其他地方则需要触发返回事件 pushHistory(); window.addEventListener("popstate", function(e) { //alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 window.location = 'http://www.baidu.com'; }, false
实时监控文本框输入字数的实例代码

需求:实时监控文本输入框的字数,并加以限制 1.实时监控当前输入字数,直接使用onkeyup事件方法,给输入框加maxlength属性限制长度.如: <div> <textarea id="txt" maxlength="10"></textarea> <p><span id="txtNum">0</span>/10</p> </div> var tx
JS实现监控微信小程序的原理

原理之前也做过浏览器web端的SDK数据埋点上报,其实原理大同小异:通过劫持原始方法,获取需要上报的数据,最后再执行原始方法,这样就能实现无痕埋点. 举个例子:我希望监控所有web页面的ajax请求,每次发送ajax,都需要在控制台打印出发送的url 平时我们开发,发送ajax一般用的都是封装好的库,例如jQuery,Axios等,然而这些库,底层仍然用的是浏览器原生的XMLHttpRequest对象,因此,我们只需要修改XMLHttpRequest对象即可注意:由于JS的灵活性,修改原生方
js监控IE火狐浏览器关闭、刷新、回退、前进事件

<html> <head> <title>test</title> <script language ="javaScript">  var flag = true; window.onbeforeunload = function () { if (flag) { var evt = window.event || arguments[0]; var userAgent = naviga
使用Javascript监控前端相关数据的代码

本篇文章介绍了Javascript监控前端相关数据,项目开发完成外发后,没有一个监控系统,我们很难了解到发布出去的代码在用户机器上执行是否正确,所以需要建立前端代码性能相关的监控系统. 所以我们需要做以下的一些模块: 一.收集脚本执行错误 function error(msg,url,line){ var REPORT_URL = "xxxx/cgi"; // 收集上报数据的信息 var m =[msg, url, line, navigator.userAgent, +new Dat
监控用户是否关闭浏览器的js代码

test function RunOnBeforeUnload() { window.event.returnValue = '关闭浏览器将退出系统.'; } [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 效果如下所示: 当wondow.event.returnValue为空的时候,这个选择提示框是不会出现的. 可是问题又来了:假如我希望用户点击"确定"按钮关闭浏览器的时候能够保存用户相关数据.那么我又应该怎么做呢?看来只有用onunload参数了. 将上面的代码修改如下
HTML+JS实现监控切屏功能

目录项目描述记录离开页面创建html 监控是否离开页面监控是否切屏记录时间离开次数项目描述该项目是我在网上看其他博客的时候无意中看到的,看见别人居然能实现这种操作很好奇项目要求做到监控网页状态记录离开次数离开时间记录离开页面实现这个切换页面功能需要用到一个web的APIvisiblitychange visibilitychange - Web API 接口参考 | MDN (mozilla.org) Document.visibilityState - Web AP
js实现简单锁屏功能实例

本文实例讲述了js实现简单锁屏功能的方法.分享给大家供大家参考.具体实现方法如下: //********* 锁屏DIV *************************** function LockScreen(tag,title,width,height,url) { if (tag) //锁屏 { var lockdiv = document.getElementById("lockscreen"); if (lockdiv!=null) { lockdiv.style.dis
js实现自动锁屏功能

1.使用场景有这么一个需求,开发了一套系统,当用户离开桌面或者一段时间不操作的话,需要把该系统所有打开页面锁定起来,就跟桌面锁屏一样,只能输入密码验证成功后,或者重新登录,才可以继续操作页面,如果刷新页面,也要保持锁定.就像下图一样.当然用户也可以手动触发锁屏.目的是防止他人随意操作系统的重要内容.那么该如何去实现呢? 5s锁屏效果如下: 2.思路首先需要一个变量isLock表示页面是否锁定.由于多个页面需要共享这个数据,且刷新后依然能够获取到,所以我使用了localStorage储存在本地
用JS创建一个录屏功能

OBS studio很酷,但 JavaScript 更酷,现在,我们用 JavaScript 创建自己的录屏功能. 首先,创建一个HTML文件,包含记录按钮和一个播放标签, 内容如下: <!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <
JS如何实现页面截屏功能实例代码

"页面截屏"是前端经常遇到的需求,比如页面生成海报,弹窗图片分享等,因为浏览器没有原生的截图API,所以需要借助canvas来实现导出图片实现需求. 可行性方案方案1: 将 DOM 改写成 canvas ,调用canvas的toBlob或者toDataURL方法即刻上传到七牛云或服务器方案2: 使用第三方库html2canvas.js实现 canvas , 在不更改页面已有DOM的情况下优雅生产canvas 解决方案的选择方案1:需要手动计算每个DOM元素的Computed St
vue+flv.js+SpringBoot+websocket实现视频监控与回放功能

目录需求: 思路: 准备工作: 实现: 最后: 需求: vue+springboot的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能. 之前项目里是纯前端实现视频监控和回放功能.但是有局限性.就是ip地址必须固定.新的需求里设备ip不固定.所以必须换一种思路. 通过设备的主动注册,让设备去主动连接服务器后端通过socket推流给前端实现实时监控和回放功能: 思路: 1:初始化设备.后端项目启动时就调用初始化方法.2:开启socket连接.前端页面加载时尝试连接so
JavaScript截屏功能的实现代码

最近参与了网易炉石盒子的相关页面开发,在做卡组分享页(地址:炉石盒子卡组分享),有个需求:用户可以把这个卡组以图片的形式分享给好友.最初的的做法是使用服务器把该页面转换成图片,然后把图片地址返回给前端.嗯,这样也挺好的啊,而且服务器还可以对转换出来的图片进行缓存,下次请求可以直接返回图片地址了.原理上是毫无毛病的.然而,问题来了,后台转换的图片和页面内容偶尔不一致,有时候会少了一一些内容,PM姐姐就很不爽了,说这个问题一定要解决.反正页面转成图片的接口是后台做的,关我luan事啊!就在暗暗自喜的
JavaScript直播评论发弹幕切图功能点集合效果代码

一.代码 html+js <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>数发直播平台</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="styl
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)

本文实例讲述了jQuery模拟360浏览器切屏效果幻灯片,分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w
js实现滑动触屏事件监听的方法

本文实例讲述了js实现滑动触屏事件监听的方法.分享给大家供大家参考.具体实现方法如下: function span_move_fun(){ var span = document.getElementById("move_k"); var span_left = $(span).offset().left; var span_top = $(span).offset().top; var start_left = $(span).offset().left; var start_top