js 实现在线考试切屏代码

切屏定义：切换选项卡，切到其他程序，最小化窗口，分屏。

要求：

1.记录切屏间隔时间（切出去再切回来的时间差）

2.记录切屏次数

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

使用visible监控切换选项卡和最小化。但visible对部分可见也会触发，所以对于分屏监控是无法监测到的，所以需要监控另一个状态是否foucus，即是否是去当前页面的焦点。

代码如下：

<!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>let isCut = falselet lastTime;//切换选项卡，切到其他程序，最小化窗口监听document.addEventListener('visibilitychange', () => {let state = document.visibilityStateif (state == "hidden") {recordTime()document.title = "我知道，你切换标签页了--tab1"} else {showTimeDiff()document.title = "嘻嘻，你又回来了"}})//分屏监听window.onblur = () => {recordTime()document.title = "你居然还切屏？？？--tab1"}window.onfocus = () => {showTimeDiff()document.title = "好吧，你回来了--tab1"}//记录切屏出去的时间function recordTime() {isCut = truelastTime = Date.now()}//计算切屏出去与切屏回来的时间差function showTimeDiff() {if (isCut) {let timeDiff = (Date.now() - lastTime) / 1000;console.log(timeDiff);countTimes()isCut = false}}//计算切屏的次数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);}
</script>
</body>
</html>

参考文章：HTML+JS 实现监控切屏_切屏监控是什么意思_普通网友的博客-CSDN博客

js 实现在线考试切屏代码相关推荐

html excel 在线编辑,利用js实现在线编辑excel表格代码
特效描述:利用js实现在线编辑 excel 表格代码.利用js实现在线编辑excel表格代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 function load(){ x ...
php让浏览器全屏,js实现各浏览器全屏代码
本篇文章给大家分享了js实现各浏览器全屏的详细代码,有兴趣的朋友可以参考学习下. 现代浏览器包括ie11,可以直接用h5的全屏api实现低版本的IE需要通过ActiveX插件实现: //直接上代码 ...
welearn考试切屏会有显示吗_welearn视听说教程4答案截图
welearn视听说教程4答案截图来源:未知作者:admin 人气: 发布时间:2020-09-28 摘要:welearn视听说教程4答案截图更多相关问题 [单选] 下列属于中华人民共和国公民的 ...
智慧树考试复制粘贴会检测吗_智慧树考试可以分屏吗？切屏会被发现吗
智慧树可以在线考试,有不少朋友想知道智慧树考试切屏有记录吗?智慧树考试分屏会被发现吗?下面小编就为大家带来相关介绍,感兴趣的朋友们快来一起了解下吧! -->>智慧树下载< 智慧树考试 ...
PHP初中英语在线考试系统的设计与实现-计算机毕设附源码 87564
PHP初中英语在线考试系统的设计与实现摘要本文研究的初中英语在线考试系统主要功能模块包括:学生用户管理.考试信息.成绩分析.通知公告管理,采取面对对象的开发模式进行软件的开发和硬体的架设,能很好 ...
PHP初中英语在线考试系统的设计与实现-计算机毕设附源码87564
PHP初中英语在线考试系统的设计与实现摘要本文研究的初中英语在线考试系统主要功能模块包括:学生用户管理.考试信息.成绩分析.通知公告管理,采取面对对象的开发模式进行软件的开发和硬体的架设,能很好 ...
PHP初中英语在线考试系统的设计与实现计算机毕设源码87564
摘要本文研究的初中英语在线考试系统主要功能模块包括:学生用户管理.考试信息.成绩分析.通知公告管理,采取面对对象的开发模式进行软件的开发和硬体的架设,能很好的满足实际使用的需求,完善了对应的软体架 ...
（附源码）基于PHP初中英语在线考试系统的设计与实现-计算机毕设87564
PHP初中英语在线考试系统的设计与实现摘要本文研究的初中英语在线考试系统主要功能模块包括:学生用户管理.考试信息.成绩分析.通知公告管理,采取面对对象的开发模式进行软件的开发和硬体的架设,能很好 ...
【亲测可用】经验分享，开发在线考试平台（类似问卷星、考试星、阿里巴巴在线考试、易考通、考试云、移动网大、移动网校、中石化网络学院、宝武微学院、iTEST等）如何用程序代码防止学生作弊？
来源: 宝武微学院 http://mooc.baosteel.com 移动网大.移动网校 https://wangda.chinamobile.com 1.如何避免考生考试过程切屏去搜寻答案? 使用J ...

js 实现在线考试切屏代码

js 实现在线考试切屏代码相关推荐

最新文章

热门文章