0

Дано:

Вот такой вот пример таймера

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>

Отображение:

введите сюда описание изображения

7
  • а если посмотреть на код страницы в браузере, то там какое значение подставляется? 31 июл 2017 в 19:20
  • Если писать "var countDownDate = new Date("${Date}").getTime();" то отобразится "NaNd NaNh NaNm NaNs" Если "var countDownDate = new Date(${Date}).getTime();" то в коде появляется "var countDownDate = new Date(Пн июл 31 2017 21:0:38 +0300).getTime();" 31 июл 2017 в 19:25
  • у вас же в вопросе переменная по другому называется. 31 июл 2017 в 19:28
  • Да , для наглядности я поменял название) 31 июл 2017 в 19:29
  • не надо ничего менять. покажите кусок jsp и кусок результата. добавьте все прямо в вопрос в виде кода. 31 июл 2017 в 19:30

1 ответ 1

-1

Спасибо Mikhail Vaysman за наведение меня на мысль о просмотре исходного кода страницы! Дело было в том что я присылал дату с кривой кодировкой. Прописано было "new SimpleDateFormat("EE MMM d y H:m:s ZZZ");" А надо было "new SimpleDateFormat("MMM d, yyyy HH:mm:ss", Locale.ENGLISH);"

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.