Дано:
Вот такой вот пример таймера
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_countdown
Задача передать в скрипт свою дату.
Есть: Контроллер:
@RequestMapping(value = "/passing/{id}")
public String startPassing(@PathVariable("id") long id, @RequestParam(required = false) Integer qId, Model model) {
Test test = this.testService.getFullTestById(id);
Date date = resService.addResult(test, userService.findByUsername(securityService.getName()));
SimpleDateFormat formatter = new SimpleDateFormat("EE MMM d y H:m:s ZZZ");
String dateString = formatter.format(date);
model.addAttribute("ourDate", dateString);
return "testPassing";
}
Попытка в jsp прописать строку: var countDownDate = new Date("${ourDate}").getTime();
Что не дает никакого ровным счетом результата. Пробовал убирать кавычки. Пробовал прописать все в стиле ${ourDate.getTime()}. Либо не работает либо вообще ломается
===================================== UPD
Вот весь код метода контроллера:
@RequestMapping(value = "/passing/{id}")
public String startPassing(@PathVariable("id") long id, @RequestParam(required = false) Integer qId, Model model) {
Test test = this.testService.getFullTestById(id);
Date date = resService.addResult(test, userService.findByUsername(securityService.getName()));
/*
* model.addAttribute("passingTest", test); model.addAttribute("questionSize",
* test.getQuestions().size()); System.out.println(test.getQuestions().size());
*/
model.addAttribute("passingTest", test);
int pageSize = test.getQuestions().size();
List<Question> questions = test.getQuestions();
model.addAttribute("questionSize", test.getQuestions().size());
// model.addAttribute("time", arg1)
SimpleDateFormat formatter = new SimpleDateFormat("EE MMM d y H:m:s ZZZ");
String dateString = formatter.format(date);
model.addAttribute("ourDate", dateString);
if (qId == null || qId < 1 || qId > pageSize) {
qId = 1;
model.addAttribute("qId", qId);
model.addAttribute("question", questions.get(qId));
} else if (qId <= pageSize) {
model.addAttribute("qId", qId);
model.addAttribute("question", questions.get(qId - 1));
}
return "testPassing";
}
testPassing.jsp :
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ page session="false"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="${contextPath}/resources/css/bootstrap.min.css"
rel="stylesheet">
<%--
<link href="${contextPath}/resources/css/common.css" rel="stylesheet"> --%>
<script src="${contextPath}/resources/js/bootstrap.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
<style>
p {
text-align: center;
font-size: 60px;
}
</style>
<title>Insert title here</title>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<c:if test="${pageContext.request.userPrincipal.name != null}">
<li><c:url var="formPerson" value="/personalOffice" /> <a
href="${formPerson}">Personal Office</a></li>
</c:if>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<c:choose>
<c:when test="${pageContext.request.userPrincipal.name != null}">
<li><c:url var="logout" value="/logout" /> <a
href="${logout}"><span class="glyphicon glyphicon-log-out"></span>
logout</a></li>
</c:when>
<c:otherwise>
<li><c:url var="formLoginUrl" value="/login" /> <a
href="${formLoginUrl}"><span
class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li><c:url var="formRegistrationUrl" value="/registration" />
<a href="${formRegistrationUrl}"> <span
class="glyphicon glyphicon-education"></span> Registration
</a></li>
</c:otherwise>
</c:choose>
<li><a href="?lang=ru" class="btn">ru</a></li>
<li><a href="?lang=ua" class="btn">ua</a></li>
<li><a href="?lang=en" class="btn">en</a></li>
</ul>
</div>
</div>
</nav>
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("${ourDate}").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24))
/ (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60))
/ (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours
+ "h " + minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
<div id="pagination">
<table class="table table-striped">
<thead>
<tr>
<th width="80"><spring:message code="question.text" /></th>
<th width="80">${question.text}</th>
</tr>
</thead>
<c:forEach items="${question.answers}" var="answer">
<tr>
<td>${answer.id}</td>
<td>${answer.answer}</td>
</tr>
</c:forEach>
</table>
<c:url value="/passing/${passingTest.id}" var="prev">
<c:param name="qId" value="${qId-1}" />
</c:url>
<c:if test="${qId > 1}">
<a href="<c:out value="${prev}" />" class="pn prev">Prev</a>
</c:if>
<c:forEach begin="1" end="${questionSize}" step="1" varStatus="i">
<c:choose>
<c:when test="${qId == i.index}">
<span>${i.index}</span>
</c:when>
<c:otherwise>
<c:url value="/passing/${passingTest.id}" var="url">
<c:param name="qId" value="${i.index}" />
</c:url>
<a href='<c:out value="${url}" />'>${i.index}</a>
</c:otherwise>
</c:choose>
</c:forEach>
<c:url value="/passing/${passingTest.id}" var="next">
<c:param name="qId" value="${qId + 1}" />
</c:url>
<c:if test="${qId + 1 <= questionSize}">
<a href='<c:out value="${next}" />' class="pn next">Next</a>
</c:if>
</div>
</body>
</html>
Отображение: