前端加后端验证倒计时答题功能实现
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端加后端验证倒计时答题功能实现相关的知识，希望对你有一定的参考价值。
思路
前端页面控制答题的开始，请求后台，后台记录开始的时间（发出请求的当前时间），再加上倒计时时间，得出结束时间。
后端返回给前端剩余的时间，前端通过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 <html xmlns="http://www.w3.org/1999/xhtml"> 9 <script type="text/javascript" src="<c:url value=‘/js/jquery.min.js‘/>"></script> 10 <script type="text/javascript"> 11 var a = 1001; 12 $(function() { 13 if ($("#endtime").val() != "") { 14 a = $("#endtime").val(); 15 } 16 fomtime(); 17 }); 18 //以毫秒为单位 19 function fomtime() { 20 if (a <= 1000) { 21 console.log($("#message")); 22 if ($("#message").text() == "请继续答题！") { 23 $("#message").text("答题结束！"); 24 } 25 return; 26 } 27 a = a - 1000; 28 var b = new Date(); 29 b.setTime(0); 30 var c = new Date(); 31 c.setTime(a); 32 var day1 = b.getDate(); //为方便调用，把天数、小时等单独定义 33 var hours1 = b.getHours(); 34 var minu1 = b.getMinutes(); 35 var seco1 = b.getSeconds(); 36 var day2 = c.getDate(); 37 var hours2 = c.getHours(); 38 var minu2 = c.getMinutes(); 39 var seco2 = c.getSeconds(); 40 var day = day2 - day1; 41 var hours = hours2 - hours1; 42 var minu = minu2 - minu1; 43 var seco = seco2 - seco1; 44 document.getElementById(‘daya‘).innerHTML = day; 45 document.getElementById(‘hoursa‘).innerHTML = hours; 46 document.getElementById(‘minua‘).innerHTML = minu; 47 document.getElementById(‘secoa‘).innerHTML = seco; 48 setTimeout("fomtime()", 1000); 49 } 50 </script> 51 <body> 52 <input type="hidden" value="${endTime}" id="endtime" name="endtime" /> 53 <p style="color: red;" color="red" id="message">${message}</p> 54 <form action="<c:url value=‘/test/begin.do‘/>"> 55 <input type="text" name="answerTime"> <input type="submit" 56 value="开始答题！"> 57 </form> 58 <div> 59 距答题结束还有: <span id=‘daya‘></span>天 <span id=‘hoursa‘></span>小时 <span 60 id=‘minua‘></span>分 <span id=‘secoa‘></span>秒 61 </div> 62 63 </body> 64 </html>
*草草实现功能，代码不够优雅
以上是关于前端加后端验证倒计时答题功能实现的主要内容，如果未能解决你的问题，请参考以下文章
前端学习——ionic/AngularJs——获取验证码倒计时按钮