您的位置：首页 > Web前端

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

2016-06-03 20:44 253 查看

思路

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

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

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

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

实现（SpringMVC+Jquery）

后端：

/**
* Copyright 2016 Zhengbin's Studio.
* All right reserved.
* 2016年6月3日 下午3:20:19
*/
package zut.race.control.back;

import java.util.Date;

import javax.servlet.http.HttpServletRequest;

import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;

/**
* @author zhengbinMac
*
*/
@Controller
@RequestMapping("test")
public class TestTimeController {
private static final Logger logger = Logger.getLogger(TestTimeController.class);
private static long beginTime = -1; // 毫秒
private static long answerTime = 20 * 1000; // 毫秒
private static long endTime = -1; // 毫秒

/*
* 1.裁判宣布开始答题 2.选手请求页面可以开始答题 3.选手中途关闭页面 4.倒计时结束，不可答题（前端加后端）
*/
@RequestMapping("/begin")
public String begin(HttpServletRequest request, ModelMap model) {
// 裁判规定答题时间'answerTime'
String tempTime = request.getParameter("answerTime");
// 如果裁判没有规定答题时间，则为默认倒计时20秒
if (tempTime != null) {
answerTime = (Integer.parseInt(tempTime) + 2) * 1000; // 毫秒
}
// 记录裁判‘开始’的时间
beginTime = new Date().getTime(); // 毫秒
// 结束时间，开始时间加上答题时间
endTime = beginTime + answerTime;
return "redirect:/test/answer.do";
}

// 学生访问答题页面
@RequestMapping("/answer")
public String answer(ModelMap model) {
// 判断学生当前请求的时间是否在结束时间内
long nowTime = new Date().getTime();
if (beginTime == -1) {
model.addAttribute("message", "比赛未开始！");
return "/index.jsp";
}
// 如果学生当前请求的时间大于结束时间，返回‘答题结束’，否则可以‘继续答题’
if (nowTime >= endTime) {
model.addAttribute("message", "答题结束！");
logger.info("答题结束，当前时间：" + nowTime);
} else {
model.addAttribute("message", "请继续答题！");
model.addAttribute("endTime", endTime - nowTime);
}
return "/index.jsp";
}
}

前端：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
response.setHeader("Cache-Control", "no-store");
response.setHeader("Pragrma", "no-cache");
response.setDateHeader("Expires", 0);
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="<c:url value='/js/jquery.min.js'/>"></script>
<script type="text/javascript">
var a = 1001;
$(function() {
if ($("#endtime").val() != "") {
a = $("#endtime").val();
}
fomtime();
});
//以毫秒为单位
function fomtime() {
if (a <= 1000) {
console.log($("#message"));
if ($("#message").text() == "请继续答题！") {
$("#message").text("答题结束！");
}
return;
}
a = a - 1000;
var b = new Date();
b.setTime(0);
var c = new Date();
c.setTime(a);
var day1 = b.getDate(); //为方便调用，把天数、小时等单独定义
var hours1 = b.getHours();
var minu1 = b.getMinutes();
var seco1 = b.getSeconds();
var day2 = c.getDate();
var hours2 = c.getHours();
var minu2 = c.getMinutes();
var seco2 = c.getSeconds();
var day = day2 - day1;
var hours = hours2 - hours1;
var minu = minu2 - minu1;
var seco = 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);
}
</script>
<body>
<input type="hidden" value="${endTime}" id="endtime" name="endtime" />
<p style="color: red;" color="red" id="message">${message}</p>
<form action="<c:url value='/test/begin.do'/>">
<input type="text" name="answerTime"> <input type="submit"
value="开始答题！">
</form>
<div>
距答题结束还有: <span id='daya'></span>天 <span id='hoursa'></span>小时 <span
id='minua'></span>分 <span id='secoa'></span>秒
</div>

</body>
</html>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航