前端加后端验证倒计时答题功能实现

思路

---

　　前端页面控制答题的开始，请求后台，后台记录开始的时间（发出请求的当前时间），再加上倒计时时间，得出结束时间。

　　后端返回给前端剩余的时间，前端通过Jquery实现倒计时的动态效果。

　　当倒计时结束，禁止答题，当用户刷新页面时，比较请求时间与结束时间，如果前者小于后者，答题继续，否则反之。

　　其中，答题时间、开始时间、结束时间，均保存在内存中。

 

实现（SpringMVC+Jquery）

---

后端：

 1 /**
 2  * Copyright 2016 Zhengbin's Studio.
 3  * All right reserved.
 4  * 2016年6月3日 下午3:20:19
 5  */
 6 package zut.race.control.back;
 7 
 8 import java.util.Date;
 9 
10 import javax.servlet.http.HttpServletRequest;
11 
12 import org.apache.log4j.Logger;
13 import org.springframework.stereotype.Controller;
14 import org.springframework.ui.ModelMap;
15 import org.springframework.web.bind.annotation.RequestMapping;
16 
17 /**
18  * @author zhengbinMac
19  *
20  */
21 @Controller
22 @RequestMapping("test")
23 public class TestTimeController {
24     private static final Logger logger = Logger.getLogger(TestTimeController.class);
25     private static long beginTime = -1; // 毫秒
26     private static long answerTime = 20 * 1000; // 毫秒
27     private static long endTime = -1; // 毫秒
28 
29     /*
30      * 1.裁判宣布开始答题 2.选手请求页面可以开始答题 3.选手中途关闭页面 4.倒计时结束，不可答题（前端加后端）
31      */
32     @RequestMapping("/begin")
33     public String begin(HttpServletRequest request, ModelMap model) {
34         // 裁判规定答题时间'answerTime'
35         String tempTime = request.getParameter("answerTime");
36         // 如果裁判没有规定答题时间，则为默认倒计时20秒
37         if (tempTime != null) {
38             answerTime = (Integer.parseInt(tempTime) + 2) * 1000; // 毫秒
39         }
40         // 记录裁判‘开始’的时间
41         beginTime = new Date().getTime(); // 毫秒
42         // 结束时间，开始时间加上答题时间
43         endTime = beginTime + answerTime;
44         return "redirect:/test/answer.do";
45     }
46 
47     // 学生访问答题页面
48     @RequestMapping("/answer")
49     public String answer(ModelMap model) {
50         // 判断学生当前请求的时间是否在结束时间内
51         long nowTime = new Date().getTime();
52         if (beginTime == -1) {
53             model.addAttribute("message", "比赛未开始！");
54             return "/index.jsp";
55         }
56         // 如果学生当前请求的时间大于结束时间，返回‘答题结束’，否则可以‘继续答题’
57         if (nowTime >= endTime) {
58             model.addAttribute("message", "答题结束！");
59             logger.info("答题结束，当前时间：" + nowTime);
60         } else {
61             model.addAttribute("message", "请继续答题！");
62             model.addAttribute("endTime", endTime - nowTime);
63         }
64         return "/index.jsp";
65     }
66 }

前端：

 1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 3 <%
 4     response.setHeader("Cache-Control", "no-store");
 5     response.setHeader("Pragrma", "no-cache");
 6     response.setDateHeader("Expires", 0);
 7 %>
 8 
 9 
10 
51 
52     
53     
${message}
54     

55          56             value="开始答题！">
57     
58     

59         距答题结束还有: 天 小时 <span
60             id='minua'>分 秒
61     
62 
63 
64 

 

*草草实现功能，代码不够优雅