HTML+JS实现监控切屏功能
目录
- 项目描述
- 记录离开页面
- 创建html
- 监控是否离开页面
- 监控是否切屏
- 记录时间
- 离开次数
项目描述 该项目是我在网上看其他博客的时候无意中看到的,看见别人居然能实现这种操作很好奇
项目要求做到
- 监控网页状态
- 记录离开次数
- 离开时间
记录离开页面 实现这个切换页面功能需要用到一个web的APIvisiblitychange
visibilitychange - Web API 接口参考 | MDN (mozilla.org)
【HTML+JS实现监控切屏功能】Document.visibilityState - Web API 接口参考 | MDN (mozilla.org)
document.addEventListener("visibilitychange", function() {console.log( document.visibilityState ); });
大致就是通过监听visiblitychange获取当前的状态,根据状态document.visibilityState去操作
文章图片
创建html
创建一个标准的html页面
监控是否离开页面
第一个标签 - 锐客网 这是第一个标签页
文章图片
监控是否切屏
根据MDN对state的陈述,
visible
对部分可见也会触发,所以对于分屏监控是无法监测到的所以需要监控另一个状态
是否foucus
,即是否是去当前页面的焦点window.onblur = () => {document.title = "你居然还切屏???--tab1"}window.onfocus = () => {document.title = "好吧,你回来了--tab1"}
文章图片
记录时间 放置一个标志位,查看是否是触发切屏或者切换标签页,并保存此时的时间戳
当下一次重新触发的时候,显示切屏时间
由于多次出现多次,所以封装成一个函数
let isCut = falselet lastTime; function recordTime() {isCut = truelastTime = 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监控切屏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- vue实现滑动验证条
- JS|深拷贝浅拷贝的区别(如何实现一个深拷贝?)
- 微信支付|实现微信支付(Native支付),使用WebSocket进行推送——3.创建支付订单,接收付款结果
- vue实现移动端的开关按钮
- Java实现微信公众号发送模版消息
- mybatisPlus填坑之逻辑删除的实现
- Qt5多线程编程的实现
- 玩转Python发短信的实现
- 3种时间序列混合建模方法的效果对比和代码实现
- Spring Boot + MDC 实现全链路调用日志跟踪,这才叫优雅。。