$$demo <button id="info">显示普通信息</button> <button id="success">显示成功信息</button> <button id="warning">显示警告信息</button> <button id="error">显示错误信息</button> <button id="ten">显示10秒的信息</button>

<script> if (!document.querySelector(".message-container")) { // 消息的容器

    const container = document.createElement("div")
    container.classList.add("message-container")

    document.body.append(container)
}

function showMsg({ msg = "", type = "info", duration = 5000 } = {}) {
    // type:
    // - info
    // - success
    // - warning
    // - error

    const container = document.querySelector(".message-container")

    const text = document.createElement("div")
    text.innerText = msg
    text.classList.add("text")
    text.classList.add(type)

    container.append(text)

    // 显示动画
    setTimeout(() => text.classList.add("animation"))
    // 隐去动画
    setTimeout(() => text.classList.remove("animation"), duration - 1000)
    // 删除元素
    setTimeout(() => text.remove(), duration)
}

// 二次封装函数
const alertInfo = (msg) => showMsg({ msg, type: "info" })
const alertSuccess = (msg) => showMsg({ msg, type: "success" })
const alertWarning = (msg) => showMsg({ msg, type: "warning" })
const alertError = (msg) => showMsg({ msg, type: "error" })

info.onclick = function () {
    alertInfo("我是一条普通信息")
}
success.onclick = function () {
    // showMsg({ msg: "我是一条成功信息", type: "success" })
    alertSuccess("我是一条成功信息")
}
warning.onclick = function () {
    alertWarning("我是一条警告信息")
}
error.onclick = function () {
    alertError("我是一条错误信息")
}
ten.onclick = function () {
    showMsg({
        msg: "显示十秒的信息显示十秒的信息显示十秒的信息显示十秒的信息显示十秒的信息显示十秒的信息",
        duration: 10000,
    })
}

</script>

<style> html {min-height: 500px; } .message-container { position: fixed;

    /* 固定定位水平居中 */
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: max-content;

    /* 忽略鼠标事件 */
    pointer-events: none;
}

.message-container .text {
    width: max-content;
    min-width: 300px;
    padding: 20px;
    border-radius: 6px;

    font-size: 14px;
    font-weight: bold;
    line-height: 20px;

    margin: 0 auto;

    transition: all 1s;

    opacity: 0;

    /* 消息的高度 */
    margin-top: -60px;
}
.message-container .text.animation {
    opacity: 1;

    /* 消息的间距 */
    margin-top: 20px;
}

.message-container .text.info {
    background-color: #f4f4f5;
    color: #909399;
}
.message-container .text.error {
    background-color: #fef0f0;
    color: #f56c6c;
}
.message-container .text.warning {
    background-color: #fdf6ec;
    color: #e6a23c;
}
.message-container .text.success {
    background-color: #f0f9eb;
    color: #67c23a;
}

</style>

$$

$$answer

<button id="info">显示普通信息</button>
<button id="success">显示成功信息</button>
<button id="warning">显示警告信息</button>
<button id="error">显示错误信息</button>
<button id="ten">显示10秒的信息</button>

<script>
    if (!document.querySelector(".message-container")) {
        // 消息的容器

        const container = document.createElement("div")
        container.classList.add("message-container")

        document.body.append(container)
    }

    function showMsg({ msg = "", type = "info", duration = 5000 } = {}) {
        // type:
        // - info
        // - success
        // - warning
        // - error

        const container = document.querySelector(".message-container")

        const text = document.createElement("div")
        text.innerText = msg
        text.classList.add("text")
        text.classList.add(type)

        container.append(text)

        // 显示动画
        setTimeout(() => text.classList.add("animation"))
        // 隐去动画
        setTimeout(() => text.classList.remove("animation"), duration - 1000)
        // 删除元素
        setTimeout(() => text.remove(), duration)
    }

    // 二次封装函数
    const alertInfo = (msg) => showMsg({ msg, type: "info" })
    const alertSuccess = (msg) => showMsg({ msg, type: "success" })
    const alertWarning = (msg) => showMsg({ msg, type: "warning" })
    const alertError = (msg) => showMsg({ msg, type: "error" })

    info.onclick = function () {
        alertInfo("我是一条普通信息")
    }
    success.onclick = function () {
        // showMsg({ msg: "我是一条成功信息", type: "success" })
        alertSuccess("我是一条成功信息")
    }
    warning.onclick = function () {
        alertWarning("我是一条警告信息")
    }
    error.onclick = function () {
        alertError("我是一条错误信息")
    }
    ten.onclick = function () {
        showMsg({
            msg: "显示十秒的信息显示十秒的信息显示十秒的信息显示十秒的信息显示十秒的信息显示十秒的信息",
            duration: 10000,
        })
    }
</script>

<style>
    .message-container {
        position: fixed;

        /* 固定定位水平居中 */
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: max-content;

        /* 忽略鼠标事件 */
        pointer-events: none;
    }

    .message-container .text {
        width: max-content;
        min-width: 300px;
        padding: 20px;
        border-radius: 6px;

        font-size: 14px;
        font-weight: bold;
        line-height: 20px;

        margin: 0 auto;

        transition: all 1s;

        opacity: 0;

        /* 消息的高度 */
        margin-top: -60px;
    }
    .message-container .text.animation {
        opacity: 1;

        /* 消息的间距 */
        margin-top: 20px;
    }

    .message-container .text.info {
        background-color: #f4f4f5;
        color: #909399;
    }
    .message-container .text.error {
        background-color: #fef0f0;
        color: #f56c6c;
    }
    .message-container .text.warning {
        background-color: #fdf6ec;
        color: #e6a23c;
    }
    .message-container .text.success {
        background-color: #f0f9eb;
        color: #67c23a;
    }
</style>

$$