如何自定义跳转页面_怎么加跳转界面-CSDN博客

本文链接：https://blog.csdn.net/youloveit/article/details/54021831

Tomcat子代的错误页面太难看了，开发中我们可能要重写一下。这里有两种方式可以实现。

第一种方式

在web.xml中配置error-page标签

发生错误的页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <%
        int i = 1/0;
    %>
</body>
</html>

web.xml配置

  <error-page>
    <error-code>500</error-code>
    <location>/errors/500.jsp</location>
  </error-page>

自定义的错误页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.1.1.min.js"></script>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    h1 {
        line-height: 300px;
        text-align: center;
    }
</style>
</head>
<body>

</body>
</html>
<script>
    $(function() {
        var obj1 = $("<div></div>");
        obj1.html("<h1>500错误</h1>");
        obj1.css({"width":"300px", "height":"300px", "background-color":"rgb(0,0,0)", "position":"fixed", "top":"0px", "left":"0px", "border-radius":"150px"});
        obj1.prop("id","divId1");
        $("body").append(obj1);

        // 获取可移动区域屏幕的大小
        var borWidth = $(window).width()-$("#divId1").innerWidth();
        var borHeight = $(window).height()-$("#divId1").innerHeight();
        // alert(borWidth);

        //元素移动的方向
        var xMove = 1;
        var yMove = 1;


        //颜色值
        var r1;
        var g1;
        var b1;

        //设定计时器
        setInterval(move, 10);

        function move() {
            var x1 = parseInt($("#divId1").css("left"));
            var y1 = parseInt($("#divId1").css("top"));

            // alert(x);

            //获得偏移量
            x1 = x1 + xMove*3;
            y1 = y1 + yMove*2;

            //获得颜色值
            r1 = x1%256;
            g1 = y1%256;
            b1 = Math.floor((x1+y1)/2)%256;

            //判断位置
            if ((x1>=borWidth&&xMove==1)||(x1<=0&&xMove==-1)) {
                xMove*=-1;
            }
            if ((y1>=borHeight&&yMove==1)||(y1<=0&&yMove==-1)) {
                yMove*=-1;
            }

            $("#divId1").css({"top":y1+"px", "left":x1+"px","background-color":"rgb("+r1+","+g1+","+b1+")"});
        }
    }); 
</script>

第二种方式

在JSP指令中加入errorPage属性

发生错误的页面

<%@ page language="java" contentType="text/html; charset=UTF-8" errorPage="/errors/500.jsp"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <%
        int i = 1/0;
    %>
</body>
</html>

自定义的错误页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.1.1.min.js"></script>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    h1 {
        line-height: 300px;
        text-align: center;
    }
</style>
</head>
<body>

</body>
</html>
<script>
    $(function() {
        var obj1 = $("<div></div>");
        obj1.html("<h1>500错误</h1>");
        obj1.css({"width":"300px", "height":"300px", "background-color":"rgb(0,0,0)", "position":"fixed", "top":"0px", "left":"0px", "border-radius":"150px"});
        obj1.prop("id","divId1");
        $("body").append(obj1);

        // 获取可移动区域屏幕的大小
        var borWidth = $(window).width()-$("#divId1").innerWidth();
        var borHeight = $(window).height()-$("#divId1").innerHeight();
        // alert(borWidth);

        //元素移动的方向
        var xMove = 1;
        var yMove = 1;


        //颜色值
        var r1;
        var g1;
        var b1;

        //设定计时器
        setInterval(move, 10);

        function move() {
            var x1 = parseInt($("#divId1").css("left"));
            var y1 = parseInt($("#divId1").css("top"));

            // alert(x);

            //获得偏移量
            x1 = x1 + xMove*3;
            y1 = y1 + yMove*2;

            //获得颜色值
            r1 = x1%256;
            g1 = y1%256;
            b1 = Math.floor((x1+y1)/2)%256;

            //判断位置
            if ((x1>=borWidth&&xMove==1)||(x1<=0&&xMove==-1)) {
                xMove*=-1;
            }
            if ((y1>=borHeight&&yMove==1)||(y1<=0&&yMove==-1)) {
                yMove*=-1;
            }

            $("#divId1").css({"top":y1+"px", "left":x1+"px","background-color":"rgb("+r1+","+g1+","+b1+")"});
        }
    }); 
</script>

效果

给错误提示信息，加了一个弹球的效果。

这里写图片描述