四，js+css封装消息提示

1，messgae.js

function messageTip(msg, duration = 3000) {
    let elem = document.createElement('div');
    elem.className = "errorTip";
    elem.innerText = msg;
    document.body.appendChild(elem);
    setTimeout(() => {
        document.body.removeChild(elem);
    }, duration)
}

2，使用message.js

messageTip('请求失败')

以第二篇html为例：

<script src="../js/message.js"></script>

 

        commonAjax('post', url, params, function (data) {
            if (data.code != 1) {
                messageTip(data.msg)
            } else {

            }
        });

3，errorTip样式

创建一个div用于消息提示，设置内容为消息提示内容，挂载到body上，设置显示时长，默认是3s，为div增加class为errorTip，设置errorTip的样式（动画）：

@keyframes modal-fade {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.errorTip {
    font-size: 12px;
    color: #1D1D1D;
    line-height: 18px;
    border: 1px solid #FA3837;
    border-radius: 4px;
    padding: 8px 16px;
    background: #FFF1F1;
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 2100;
    transform: translateX(-50%);
    animation: modal-fade 3.2s linear;
}