考试系统之倒计时的实现及暂停功能浅谈
•发布于   •作者 成哥哥  •396 次浏览  •来自 博客

本周我们开始了我们的第二个项目——考试系统。该系统采用SSH框架进行开发。首先学生的登录界面在此不做介绍。本次主要说一说学生做题时倒计时功能的实现以及“休息一下功能的实现”:

一:功能需求

学生开始进行测试时,系统自动倒计时,学生可点击“休息一下”按钮,此时系统倒计时会暂停。

二:实现方式

1、根据需求,学生点击“休息一下”按钮时,弹出模态框,模态框中有“继续做题”按钮,点击可退出模态框继续做题。

2、当倒计时结束时,学生再点击“休息一下按钮”时,模态框中显示“考试已结束!”字样。

三:具体代码实现与截图

页面样式:

点击休息一下模态框样式:

倒计时结束时,模态框显示样式:


下面来看具体代码实现:

1:“休息一下”按钮代码:

<div class="left_content">
    <div class="time">考试剩余时间</div>
	<p><strong id="minute_show"></strong>:<strong id="second_show"></strong></p>
	<center>
	<button class="btn btn-primary btn-lg"  data-toggle="modal" data-target="#myModal" onclick="setStop()">休息一下</button>
	</center>
	<center>
	<button class="btn btn-primary btn-lg">我要交卷</button>
	</center>
</div>

2:模态框代码:

<!-- 休息一下模态框 -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-footer"> <center> <h4><span id="span_rxid">正在休息中……</span></h4> <input type="button" id="doexcire" value="继续做题" class="btn btn-default" data-dismiss="modal" onclick="doStart()"> </center> </div> </div> </div> </div>

3:js代码:

var intDiff = parseInt(5);//倒计时总秒数量
var judgeDiff;//倒计时秒数中间变量
	var stop = true;//倒计时初始状态
	
	//判断倒计时是否结束
	function setStop(){
		if(judgeDiff==-1){
	    	$("#span_rxid").html("");
	    	$("#span_rxid").html("考试已结束!");
	    	$("#doexcire").val("确定");
	    }else{
	    	stop=false;
	    }
	}
	
	//点击继续做题后继续倒计时
	function doStart(){
		stop=true;
	}
	
	//倒计时方法
	function timer(intDiff){
	window.setInterval(function(){
	    var  minute=0,
	        second=0;//时间默认值        
	    if(intDiff > 0){
	        minute = Math.floor(intDiff / 60) ;
	        second = Math.floor(intDiff) - (minute * 60);
	    }
	    if (minute <= 9) minute = '0' + minute;
	    if (second <= 9) second = '0' + second;
	    $('#minute_show').html('<s></s>'+minute);
	    $('#second_show').html('<s></s>'+second);
	    if(stop){
	    	intDiff--;
	    }
	    if(intDiff==-1){
	    	judgeDiff=intDiff;
	    	alert("时间到了!,交卷吧!");
	    	$("#examForm").submit();
	    }
	    }, 1000);
		
	} 
jQuery(function($) {
	//当初始状态为true时执行倒计时
	if(stop){
		timer(intDiff);
	}
}

总结:

这是我自己琢磨的方法,可能存在bug。如有错误之处,欢迎大家指正!希望这篇博客能对大家有些许帮助!还有不到一个月就毕业了,在最后的时间里,我们一起加油!


0 回复
回到顶部

©2017 Powered by 三十三行伪代码
皖ICP备17005175号-3