Front end plus back end verification Countdown answer function realization

Ideas

Front page Control the start of the answer, request background, background record the start time (the current time to make the request), plus the countdown time, the end time.

The backend returns the remaining time to the front end, and the front end uses jquery to achieve the dynamic effect of the countdown.

When the countdown is over, prohibit the answer, when the user refreshes the page, compare the request time and end time, if the former is less than the latter, the answer continues, otherwise.

The answer time, start time, and end time are all stored in memory.

Implementation (Springmvc+jquery)

Back end:

1 /**2 * Copyright zhengbin ' s Studio.3 * All right reserved.4 * June 3, 2016 afternoon 3:20:195  */6  PackageZut.race.control.back;7 8 Importjava.util.Date;9 Ten Importjavax.servlet.http.HttpServletRequest; One  A ImportOrg.apache.log4j.Logger; - ImportOrg.springframework.stereotype.Controller; - ImportOrg.springframework.ui.ModelMap; the Importorg.springframework.web.bind.annotation.RequestMapping; -  - /** -  * @authorZhengbinmac +  * -  */ + @Controller A@RequestMapping ("Test") at  Public classTesttimecontroller { -     Private Static FinalLogger Logger = Logger.getlogger (Testtimecontroller.class); -     Private Static LongBeginTime =-1;//milliseconds -     Private Static LongAnswertime = 20 * 1000;//milliseconds -     Private Static LongEndTime =-1;//milliseconds -  in     /* - * 1. The referee announces the beginning of the answer 2. The Player request page can start with 3. The player closes the page 4. Countdown end, not answer (front plus backend) to      */ +@RequestMapping ("/begin") -      PublicString Begin (HttpServletRequest request, Modelmap model) { the         //The referee is required to answer time ' answertime ' *String temptime = Request.getparameter ("Answertime"); $         //If the referee does not specify a time to answer, the default countdown is 20 seconds.Panax Notoginseng         if(Temptime! =NULL) { -Answertime = (Integer.parseint (temptime) + 2) * 1000;//milliseconds the         } +         //record the time the referee ' started ' ABeginTime =NewDate (). GetTime ();//milliseconds the         //end time, start time plus answer time +EndTime = BeginTime +Answertime; -         return"Redirect:/test/answer.do"; $     } $  -     //Student Access Answer page -@RequestMapping ("/answer") the      PublicString Answer (Modelmap model) { -         //determine if the student's current request time is within the end timeWuyi         LongNowtime =NewDate (). GetTime (); the         if(BeginTime = =-1) { -Model.addattribute ("Message", "Game not started!") "); Wu             return"/index.jsp"; -         } About         //if the student's current request time is greater than the end time, return to ' answer end ', otherwise you can ' continue the answer ' $         if(Nowtime >=endTime) { -Model.addattribute ("message", "the answer is over!") "); -Logger.info ("End of answer, current time:" +nowtime); -}Else { AModel.addattribute ("message", "Please continue to answer!") "); +Model.addattribute ("EndTime", EndTime-nowtime); the         } -         return"/index.jsp"; $     } the}

Front:

1<%@ page language= "java" import= "java.util.*" pageencoding= "Utf-8"%>2<%@ taglib prefix= "C" uri= "Http://java.sun.com/jsp/jstl/core"%>3<%4Response.setheader ("Cache-control", "No-store");5Response.setheader ("Pragrma", "No-cache");6Response.setdateheader ("Expires", 0);7%>89<script type= "Text/javascript" src= "<c:url value= '/js/jquery.min.js '/>" ></script>Ten<script type= "Text/javascript" > One     varA = 1001; A$(function() { -         if($ ("#endtime"). val ()! = "") { -A = $ ("#endtime"). Val (); the         } - fomtime (); -     }); -     //in milliseconds +     functionFomtime () { -         if(A <= 1000) { +Console.log ($ ("#message")); A             if($ ("#message"). Text () = = "Please continue to answer!" ") { at$ ("#message"). Text ("End of answer!") "); -             } -             return; -         } -A = a-1000; -         varb =NewDate (); inB.settime (0); -         varc =NewDate (); to C.settime (a); +         varDay1 = B.getdate ();//for easy invocation, define the number of days, hours, etc. separately -         varHours1 =b.gethours (); the         varMINU1 =b.getminutes (); *         varSeco1 =b.getseconds (); $         varDay2 =c.getdate ();Panax Notoginseng         varHours2 =c.gethours (); -         varMINU2 =c.getminutes (); the         varSeco2 =c.getseconds (); +         varDay = Day2-Day1; A         varHours = hours2-hours1; the         varMinu = minu2-minu1; +         varSeco = Seco2-Seco1; -document.getElementById (' Daya '). InnerHTML =Day ; $document.getElementById (' Hoursa '). InnerHTML =hours; $document.getElementById (' Minua '). InnerHTML =Minu; -document.getElementById (' Secoa '). InnerHTML =Seco; -SetTimeout ("Fomtime ()", 1000); the     } -</script>Wuyi<body> the<input type= "hidden" value= "${endtime}" id= "EndTime" name= "EndTime"/> -<p style= "color:red;" color= "Red" id= "message" >${message}</p> Wu<form action= "<c:url value= '/test/begin.do '/>" > -<input type= "text" name= "Answertime" > <input type= "Submit" AboutValue= "Start answering! "> $</form> -<div> -From the end of the answer: <span id= ' Daya ' ></span> days <span id= ' Hoursa ' ></span> hours <span -Id= ' Minua ' ></span> min <span id= ' Secoa ' ></span>seconds A</div> +  the</body> -
* The code is not elegant enough to implement the function hastily
Front end plus back end verification Countdown answer function realization