在线考试开启全屏

本文介绍了一种利用JavaScript实现的在线考试系统,通过`requestFullscreen`等API实现考试期间的全屏模式,并在交卷时退出全屏,同时监控全屏状态防止作弊。技术涉及前端按钮操作、全屏API和浏览器事件监听。
摘要由CSDN通过智能技术生成
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<button type="button" id="startTest">开始考试</button>
<button type="button" id="endTheTest">结束考试</button>
<!-- 防作弊代码相关 -->
<script>
// 开始考试进入全屏模式
function launchFullscreen(element) {
    if(element.requestFullscreen) {
      element.requestFullscreen();
    } else if(element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if(element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if(element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
}
// 交卷时退出全屏
function exitFullscreen () {
    if (document.exitFullscreen) {
        document.exitFullscreen();//W3C
    }else if(document.mozCancelFullScreen){
        document.mozCancelFullScreen();//FIREFOX
    }else if(document.webkitCancelFullScreen){
        document.webkitCancelFullScreen();//CHROME
    }else if(document.msExitFullscreen){
        document.msExitFullscreen();//MSIE
    }else if(document.oRequestFullscreen){
        document.oCancelFullScreen();
    }
}
// 检测是否全屏
function checkFull() {
  var fullScreen = parent.document.webkitIsFullScreen || parent.document.fullscreen || parent.document.mozFullScreen || parent.document.msFullscreenElement;
  if (fullScreen === undefined) {fullScreen = false;}
  return fullScreen;
}
$(function(){
    // 开始考试时,进入全屏状态
    $('#startTest').click(function(){
      launchFullscreen(document.documentElement);
    })
    // 交卷时,退出全屏
    $('#endTheTest').click(function(){
      exitFullscreen(document.documentElement);
    })
    // 浏览器类型
    var fullscreenchangeList = ['fullscreenchange','mozfullscreenchange','webkitfullscreenchange','MSFullscreenChange']
    // 根据不同浏览器类型,为document添加事件监听
    fullscreenchangeList.forEach(function(ele){
        document.addEventListener(ele, function () { 
          if (!checkFull()) {
            alert("退出全屏")
          }
        }, false); 
    })
})
</script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值