页面错误信息显示的小案例_错误详情的展示设计-优快云博客

本文链接：https://blog.youkuaiyun.com/Milogenius/article/details/78671556

这里写图片描述
Hi,大家好,首先给大家介绍我女神,你们肯定认识,哈哈,言归正传,开始说说我今天的博文;

在我们平时的开发中,需要将错误信息展示给用户,下面分享一种实现方式

1.实现思路

首先,定义一对嵌套的div标签,并且在内部div标签中定义一个span标签.错误信息我们会放到span标签中展示;
我们在css中设置 display: none让div隐藏,如果有错误信息返回,我们调用方法让它展示出来,用setTimeout()来控制多久以后再隐藏它;
大家在使用的时候将js文件和css文件抽取出来,放到指定位置,然后引入到html或者jsp就可以;
这里为了方便演示,我给button绑定了事件来实现,在项目中我们一般发起ajax请求,在返回的result中获取到msg,进而调用封装好的toast()方法来展示错误信息就可以;

2.代码演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script type="text/javascript">
        //弹出错误信息
        function toast(msg) {
            $('.toastItem').show().find('span').text(msg);
            setTimeout(function () {
                $('.toastItem').hide()
            }, 1500)
        }
        $(function () {
            $("button").click(function () {
                var msg = "我是错误信息";
                toast(msg);
            });
        });
    </script>
    <style type="text/css">
        .toastItem {
            display: none;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 9999;
        }

        .toastItem .toastTip {
            width: 100%;
            position: fixed;
            bottom: 5%;
            left: 0;
            text-align: center;
        }

        .toastItem .toastTip span {
            padding: 8px 20px;
            border-radius: 30px;
            color: #fff;
            background: #393939;
        }
    </style>
</head>
<body>
<p id="p1">页面错误信息提示</p>
<button>顶顶</button>

<div class="toastItem">
    <div class="toastTip"><span></span></div>
</div>
</body>
</html>