js 实现在线考试切屏代码

FinelyYang

已于 2023-06-02 09:47:34 修改

阅读量992

点赞数

文章标签：切屏

于 2023-03-30 09:52:12 首次发布

本文链接：https://blog.csdn.net/xiaoxiangzi520/article/details/129851073

版权

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

要求：

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 = false
  let lastTime;

//切换选项卡，切到其他程序，最小化窗口监听
  document.addEventListener('visibilitychange', () => {
    let state = document.visibilityState

    if (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 = true
    lastTime = 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博客

FinelyYang

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
js 实现在线考试切屏代码

也会触发，所以对于分屏监控是无法监测到的，所以需要监控另一个状态。1.记录切屏间隔时间（切出去再切回来的时间差）实现这个切换页面功能需要用到一个web的API。切屏定义：切换选项卡，最小化窗口，分屏。，即是否是去当前页面的焦点。获取当前的状态，根据状态。
复制链接

扫一扫