php ajax 考试倒计时,ajax实现在线考试倒计时

最新推荐文章于 2022-01-17 17:26:00 发布

几木木

最新推荐文章于 2022-01-17 17:26:00 发布

阅读量321

点赞数

文章标签： php ajax 考试倒计时

基于的C/S模式单机版的考试系统，我记得那种单机版的考试系统在进入考试以后界面就会自动的最大化，从而使考生的界面只能停留在考试界面而不能进行其他的操作，那样的话保证了考试系统的安全性。那么现在基于B/S模式下的在线考试系统的考试倒计时应该怎么样做了。为了比较性的说明问题，我先把我的具体做法写下来，大家一起来分析分析：

1.第一种方法：

我采用的是JavaScript来实现的

设计思想：在客户端加载页面时调用一段JS代码，在这段代码中设置一个函数，获取当前时间，并每隔一秒调用以此该函数。

编写代码如下：

4 var timerID = null;

5 var timerRunning = false;

6 var leftsec = 0;

7 var leftmin = 2;

8 var lefthour = 0;

9 function stopclock() {

10 if (timerRunning)

11 clearTimeout(timerID);

12 timerRunning = false;

13 }

14 function startclock() {

15 stopclock();

16 showtime();

17 }

18 function showtime() {

19 var now = new Date();

20 var hours = now.getHours();

21 var minutes = now.getMinutes();

22 var seconds = now.getSeconds();

23 var timeValue = now.getYear() + "年" + (now.getMonth() + 1) + "月" + now.getDate() + "日" + ((hours >= 12) ? " 下午 " : " 上午 ");

24 var lefttime = ((hours > 12) ? hours - 12 : hours) + ((minutes < 10) ? "小时0" : "小时") + minutes + ((seconds < 10) ? "分0" : "分") + leftsec + "秒";

25 timeValue += ((hours > 12) ? hours - 12 : hours);

26 timeValue += ((minutes < 10) ? ":0" : ":") + minutes;

27 timeValue += ((seconds < 10) ? ":0" : ":") + seconds;

28 document.getElementById('thetime').innerHTML = timeValue;

29 timerID = setTimeout("showtime()", 500);

31 timerRunning = true;

32 }

35 secs = 59;

36 wait = secs * 100;

37 minute = 89; //此处设定考试总时间38 //循环调用秒的减方法 cycle();39 function cycle() {

40 for (i = 0; i <= (wait / 100); i++) {

41 //每隔一秒更新一次42 window.setTimeout("doUpdate(" + i + ")", i * 1000);

43 }

44 }

45 function doUpdate(num) {

46 if (num == (wait / 100)) {

47 cycle();

48 //三分钟前提醒考生交卷49 if (minute == 3) {

50 alert("还有三分钟时间，请及时交卷！");

51 }

52 //时间到，提交表单53 if (minute <= 0) {

54 document.exam.action = "login.aspx";

55 document.exam.submit();

56 }

57 minute--;

58 }

59 else {

60 wut = (wait / 100) - num;

61 //使得输出格式为00:0062 s = wut < 10 ? "0" + wut : wut;

63 m = minute < 10 ? "0" + minute : minute;

64 //将剩余时间显示在页面上65 document.getElementById('lefttime').innerHTML = "剩余时间：" + m + "分" + s + "秒";

66 }

67 }

81 考试系统计时及倒计时

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

这种方法在做的时候，自己一开始是很认同的，因为最近接触了JavaScript DOM编程艺术，了解了很多DOM世界的内容，所以感觉这是一种很好的方法。可是事后一想才意识到这种方法真的不可取，存在很大的漏洞，不知道读者发现了没有。那下面我们一起来分析一下，这种方法到底存在什么问题：

当你把这段代码添加到你的页面的时候，一调试运行，你会很欣慰的看到页面上会显示当前时间，并按照你设定的考试时间倒计时，没错，这是大家都能看到的。那么现在请你刷新一下页面，请你告诉我发生了什么情况。没错，你看见了考试时间仍然在计时，但你再看看倒计时时间，是不是让人很沮丧，他是不是又重新开始倒计时了呀。对，没错，这就是问题的所在，也就是说在用这种方法实现倒计时，是基于客户端的，当用户进行页面刷新时，页面的JS会重新加载，那么倒计时会回到初始状态。这样一来就失去了所谓的倒计时功能，而且这种方法还有一种漏洞就是用户可以改掉本地机的时间，那么计时也会出现错误。

2.第二种方法：

我用的是AJAX来实现的

设计思想：在客户端界面上用AJAX的Timer控件，注意使用AJAX必须使用的另外两个AJAX控件也要一起使用。考试前由监考员做好所有相应的准备工作，考试开始由有监考员点击开始考试按钮，此时将开考状态值保存在Application中，这是一个全局变量值，且是一个公有变量，session是每个用户都有一个session，则无法实现共有变量的范围，相应的则考试结束时，监考员点击结束考试实现的是将Application中的状态值变为false，当监考员发布监考命令时，在服务器上，将开考时间保存在服务器的Application中。那么把客户端的Timer的属性设置为1000ms,则客户端每隔一秒到服务器去获取一次服务器的时间，这样得到一个时间差值，再利用考试时间来算考试所剩的时间，从而实现倒计时的模式。

编写的代码如下：

1 #region 计时器的实现

2 protected void Timer1_Tick(object sender, EventArgs e)

3 {

4 DateTime NowTime = System.DateTime.Now;

5 DateTime StartTime = Convert.ToDateTime(Application["StartTime"].ToString());

6 TimeSpan RemainTime = NowTime.Subtract(StartTime);

7 int hour = int.Parse(RemainTime.Hours.ToString());

8 int minute = int.Parse(RemainTime.Minutes.ToString());

9 int seconds = int.Parse(RemainTime.Seconds.ToString());

10 int time = 4;

11 string PaperInfo = Request.Cookies["PaperInfo"].Value;