JS定时器实现页面N秒后跳转实现每隔 1s 自动刷新页面并格式化的显示当前时间

news2025/2/22 19:01:48

1. 通过 setInterval 函数，来周期性的更新倒计时间，同时更新到页面。即通过设置页面可以显示 3 2 1，然后跳转。1000指的是每隔1秒执行一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="one"></div>
<script>
    let timer = 3; // 设置跳转时间
    let div = document.querySelector('.one');
    setInterval(function() {
        if(timer==0) {
            location.href = "http://www.baidu.com"; //跳转目的地
        } else {
            div.innerHTML = "您将在"+timer+"秒后跳转到百度";
            timer--;
        }
    },1000);  // 1000毫秒 一秒执行一次
</script>
</body>
</html>

2. 通过 setTimeout 执行一个延迟函数来达到跳转的目的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h3>将在3秒后跳转到百度页面</h3>
    <script>
        setTimeout(function() {
            window.location.href = "http://www.baidu.com";
        },3000); // 3000毫秒 在这设置跳转时间
    </script>
</body>
</html>

3. SimpleDateFormat

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf8");
        resp.setContentType("text/html;charset=utf8");
        // 设置刷新时间为一秒
        resp.setHeader("Refresh","1");
        // 格式化日期
        DateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");  //这种是24小时制
        //DateFormat format = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");  //这种是12小时制
        String format1 = format.format(new Date());
        resp.getWriter().write("当前时间  "+format1);
    }