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

去北极避暑~

已于 2023-11-13 11:21:49 修改

阅读量823

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2023-11-06 20:21:16 首次发布

本文链接：https://blog.csdn.net/m0_73381672/article/details/134253315

版权

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

//第一种
@WebServlet("/aaa")
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);
    }




//第二种
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html; charset=utf-8");
        // 设置Refresh时间为1秒
        resp.setHeader("Refresh", "1");
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");// 24小时制
        String time = sdf.format(new Date());
        resp.getWriter().write("当前时间：" + time);
    }

或者

@WebServlet("/aaa")
public class test extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html; charset=utf-8");
        // 设置Refresh时间为1秒
        resp.setHeader("Refresh", "1");
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String time = sdf.format(new Date());
        resp.getWriter().write("当前时间：" + time);
    }
}

去北极避暑~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS定时器实现页面N秒后跳转实现每隔 1s 自动刷新页面并格式化的显示当前时间

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

扫一扫