在线考试防止切屏功能

最新推荐文章于 2025-03-21 15:17:01 发布

ThiagoSilva

最新推荐文章于 2025-03-21 15:17:01 发布

阅读量1.2w

点赞数 4

分类专栏：业务需要小技巧文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/ThiagoSilva/article/details/120765477

版权

本文介绍了一种在Vue.js中实现的考试防止切屏作弊的机制。通过监听页面的visibilitychange事件，结合后台接口，实时更新并限制切屏次数。当切屏次数超出设定值时，系统会自动提交试卷。该功能通过设置提示框，告知考生剩余切屏次数，确保考试公平进行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天分享一个考试防止切屏作弊的功能

需求

效果如动图：在这里插入图片描述
需求描述：不难看出，这是只要考试页面不在当前页面的都会被看做是切屏，当超过设置的考试切屏允许的最大次数时（在考试管理里面会有这个功能），就会自动交卷停止作答。

关键点1：在vue生命周期mounted钩子里面，添加一个监听页面可见或不可见的事件visibilitychange

关键点2：为visibilitychange事件绑定一个函数，在此函数中获取页面元素的状态document.visibilityState

关键点3：调用后台接口，获取在考试管理中是否设置了开启可切屏功能，以及可切屏的最大次数和还剩余多少次的数据（还剩多少次切屏这个是调用接口获取的，每切屏一次调用一次接口，后台老哥去处理一次，其实完全也可以前端来做）

HTML结构

<el-dialog title="提示" :visible.sync="tipsFlag" width="480px" class="commonDialog multi clickLight" center :close-on-click-modal="false">
      <div class="dialogTipsbox" v-if="tips===1">你还有试题未作答，确认要交卷？</div>
      <div class="dialogTipsbox" v-if="tips===2">
        最多只能切屏{
   {
   switchPage.switchPageTimes}}次，你还可切换{
   {
   switchPage.remaTimes}}次，
        <br />
        超过{
   {
   switchPage.switchPageTimes}}次将强行交卷！
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tipsFlag = false" v-if="tips===1">取 消</el-button>
        <el-button type="primary" @click="onConfirmTip" v-if="tips===1">

最低0.47元/天解锁文章