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

思路前端页面控制答题的开始，请求后台，后台记录开始的时间（发出请求的当前时间），再加上倒计时时间，得出结束时间。
后端返回给前端剩余的时间，前端通过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 { 24private static final Logger logger = Logger.getLogger(TestTimeController.class); 25private static long beginTime = -1; // 毫秒 26private static long answerTime = 20 * 1000; // 毫秒 27private static long endTime = -1; // 毫秒 28 29/* 30* 1.裁判宣布开始答题 2.选手请求页面可以开始答题 3.选手中途关闭页面 4.倒计时结束，不可答题（前端加后端） 31*/ 32@RequestMapping("/begin") 33public String begin(HttpServletRequest request, ModelMap model) { 34// 裁判规定答题时间'answerTime' 35String tempTime = request.getParameter("answerTime"); 36// 如果裁判没有规定答题时间，则为默认倒计时20秒 37if (tempTime != null) { 38answerTime = (Integer.parseInt(tempTime) + 2) * 1000; // 毫秒 39} 40// 记录裁判‘开始’的时间 41beginTime = new Date().getTime(); // 毫秒 42// 结束时间，开始时间加上答题时间 43endTime = beginTime + answerTime; 44return "redirect:/test/answer.do"; 45} 46 47// 学生访问答题页面 48@RequestMapping("/answer") 49public String answer(ModelMap model) { 50// 判断学生当前请求的时间是否在结束时间内 51long nowTime = new Date().getTime(); 52if (beginTime == -1) { 53model.addAttribute("message", "比赛未开始！"); 54return "/index.jsp"; 55} 56// 如果学生当前请求的时间大于结束时间，返回‘答题结束’，否则可以‘继续答题’ 57if (nowTime >= endTime) { 58model.addAttribute("message", "答题结束！"); 59logger.info("答题结束，当前时间：" + nowTime); 60} else { 61model.addAttribute("message", "请继续答题！"); 62model.addAttribute("endTime", endTime - nowTime); 63} 64return "/index.jsp"; 65} 66 }

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