简单实现页面3秒跳转

最新推荐文章于 2023-08-01 11:53:59 发布

带码人

最新推荐文章于 2023-08-01 11:53:59 发布

阅读量7.7k

点赞数 6

分类专栏：开发那些事文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_46803792/article/details/106752869

版权

开发那些事专栏收录该内容

8 篇文章 1 订阅

订阅专栏

在前端实现几秒之后完成页面的跳转

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <jsp:include page="/WEB-INF/jsp/component/config.jsp" flush="true"/>
    <title>该功能还未完成</title>
    <style type="text/css">
        * {
            margin: 0;//边宽为0像素
            padding: 0;//填充为0像素
            background-color: transparent;//将背景颜色设为透明
        }
        a {
            font-size: x-large;
            color: #00B83F;
        }
        span {
            font-size: x-large;
            color: rosybrown;
        }
        //设置div包裹的宽度，字体过多，可以调节宽使字体保持在同一行中
        div {
            width: 570px;
            height: 50px;
        }
        //将文字居于浏览器中央
        .center-in-center {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    </style>
    
    <script type="text/javascript">
        $(function () {
            setInterval(jump, 1000)//设置每1000毫秒执行函数
        });
        var second = 3; //定义一个数值

        function jump() {
            second--;
            if (second > 0) {
                $("#content").html(x)//每次显示的值都不一样，实现秒数的减少
            } else {
                window.location.href = "<%=basePath%>index.do";
            }
        }
    </script>
</head>
<body>

<div class="center-in-center">
    //这里需要在span元素内先确定一个数值，不然刚进入此页面span内容为空
    <span>抱歉，该功能还未实现，<span id="content">3</span>秒后跳转到主页面</span>
    <a href="<%=basePath%>index.do">立刻跳转</a>
</div>
</body>
</html>