Question

我是“ jsp ”和“ jquery ”的新手，我认为下面的代码应该在屏幕上显示一个数字并且每3秒增加一个，但经过2或3次重复后，它会断开并开始显示错误的数字

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
    <script type="text/javascript">
        var auto_refresh = setInterval(
                function () {
                    $('#load_me').load('index.jsp').fadeIn("fast");
                }, 3000); // autorefresh the content of the div after
        //every 3000 milliseconds(3sec)
    </script>
</head>
<body>
<%! int i = 0;%>
<div id="load_me">
    <%out.print(++i);%>
</div>
</body>
</html>

我甚至试图显示时间而不是打印数字，但同样的问题产生了：

<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
    <script type="text/javascript">
        var auto_refresh = setInterval(
                function () {
                    $('#load_me').load('index.jsp').fadeIn("fast");
                }, 3000); // autorefresh the content of the div after
        //every 3000 milliseconds(3sec)
    </script>
</head>
<body>
<div id="load_me">
    <%
        Date d = new Date();
        SimpleDateFormat sp = new SimpleDateFormat("hh:mm:ss");
        String t= sp.format(d);
        out.print(t);
    %>
</div>
</body>
</html>

Answer 1

似乎你想要一个'div＃load_me'应该每3秒显示一个1的数字增量。尝试下面的普通javaScript：

setInterval((function() {
var currNumber = 0;
return function() {
document.getElementById('load_me').innerHTML = ++currNumber;
}
})(), 3000);

编辑（演示完整代码）：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <!-- we do not need jquery any more :-) -->
</head>
<body>
<div id="load_me">

</div>
<script>
setInterval((function() {
    var currNumber = 0;
    return function() {
    document.getElementById('load_me').innerHTML = ++currNumber;
    }
    })(), 3000);
</script>
</body>
</html>

这样你就可以避免不必要的服务器调用。

Answer 2

以下代码适用于显示时间，但您必须创建date.jsp页面，

<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
    <script type="text/javascript">
        var auto_refresh = setInterval(
                function () {
                    $('#load_me').load('date.jsp').fadeIn("slow");
                }, 3000); 
    </script>
</head>
<body>
<div id="load_me">
<%@ include file="date.jsp"%>
</div>
</body>
</html>

date.jsp：

<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
</head>
<body>
<%
    Date d = new Date();
    SimpleDateFormat sp = new SimpleDateFormat("hh:mm:ss");
    String t= sp.format(d);
    out.print(t);
%>
</body>
</html>

使用jquery每隔3秒显示一次时间不正常

2 个答案: