防考试作弊切屏

小曲曲

已于 2024-03-20 16:56:35 修改

阅读量1k

点赞数 8

分类专栏： PC js 文章标签：前端 javascript vue.js

于 2024-02-29 16:00:13 首次发布

本文链接：https://blog.csdn.net/weixin_43848576/article/details/136373865

版权

js 同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

21 篇文章 1 订阅

订阅专栏

文章介绍了两种方法防止考试作弊，一是通过监听页面失焦和聚焦事件来计算切屏时间，当超过1分钟时自动交卷；二是监听页面显示隐藏状态，仅在全屏时记录。关键点在于确保事件处理函数在页面销毁时正确移除。

摘要由CSDN通过智能技术生成

防考试作弊切屏

方法一：监听页面失焦聚焦事件：防止任何操作

监听考试页面失焦事件记录切出时间
页面聚焦时累积记录切入时间，累积时间大于1分钟自动交卷并移除时间
页面销毁移出事件
***bug：必须把事件回调定义为方法，在销毁的时候才可以销毁

 mounted() {
     window.addEventListener('blur', this.blurDom);
     window.addEventListener('focus', this.focusDom);
  },
  destroyed() {
    console.log(1111111, '页面销毁')
    window.removeEventListener('blur', this.blurDom)
    window.removeEventListener('focus', this.focusDom)
  },

  methods: {
    blurDom() {
      this.start = Date.now()
      console.log(1111111, '失去焦点', this.start)
    },
    focusDom() {
      if (this.start == 0) return
      this.end = Date.now()
      this.hideTime += this.end - this.start
      console.log(1111111, '页面聚焦', this.end, this.hideTime)

      if (this.hideTime > 1 * 60 * 1000) {
        console.log('没机会了')
        this.hilarity(1)
        window.removeEventListener('blur', this.blurDom)
        window.removeEventListener('focus', this.focusDom)
      } else {
        this.$message.warning('切屏时间超过' + this.setTime + '分钟自动交卷');
      }
    },
 }

方法二：监听页面显示隐藏方法：只能监听页面被全部覆盖的情况，小窗口监听不到

监听考试页面隐藏记录切出时间
页面显示时累积记录切入时间，累积时间大于1分钟自动交卷并移除时间
页面销毁移出事件
***bug：必须把事件回调定义为方法，在销毁的时候才可以销毁

 mounted() {
     document.addEventListener("visibilitychange", this.watchDom);
  },
  destroyed() {
    console.log(1111111, '页面销毁')
    document.removeEventListener("visibilitychange", this.watchDom) 
  },

  methods: {
     watchDom() {
      if (document.visibilityState == 'hidden') {
        this.start = Date.now()
        console.log(1111111, 'start', this.start, this.hideTime)
      } else {
        this.end = Date.now()
        this.hideTime += this.end - this.start
        console.log(1111111, 'end', this.end, this.end - this.start, this.hideTime)

        if (this.hideTime > 1 * 60 * 1000) {
          this.hilarity(1)
          document.removeEventListener("visibilitychange", this.watchDom) 
        } else {
          this.$message.warning('切屏时间超过' + this.setTime + '分钟将自动交卷');
        }
      }
    },
 }