效果

代碼

/**
 * 用原生 JS 封裝一個(gè) Toast 組件
 */
var Toast = {
    // 隱藏的 setTimeOut 引用
    hideTimeOut: null,
    /**
     * 初始化
     */
    init: function () {
        var toastNode = document.createElement('section');
        toastNode.innerHTML = '<i class="iconfont icon-success"></i><i class="iconfont icon-error"></i><span class="text">111</span>';
        toastNode.id = 'toastWaka'; // 設(shè)置id倾哺，一個(gè)頁面有且僅有一個(gè)Toast
        toastNode.setAttribute('class', 'toast');   // 設(shè)置類名
        toastNode.style.display = 'none';   // 設(shè)置隱藏
        document.body.appendChild(toastNode);
    },
    /**
     * 顯示Toast
     * @param text 文本內(nèi)容
     * @param type 類型 success error
     * @param duration 持續(xù)時(shí)間
     */
    show: function (text, type, duration) {
        // 確保上一次的 TimeOut 已被清空
        if (this.hideTimeOut) {
            clearTimeout(this.hideTimeOut);
            this.hideTimeOut = null;
            // console.error('上一次的 TimeOut 還未走完!');
            // return;
        }
        if (!text) {
            console.error('text 不能為空!');
            return;
        }
        var domToastWaka = document.getElementById('toastWaka');
        console.log('domToastWaka', domToastWaka);
        if (!domToastWaka) {
            console.error('toastWaka DOM 不存在!');
            return;
        }
        var domIconSuccess = domToastWaka.querySelector('.icon-success');   // 成功圖標(biāo)
        var domIconError = domToastWaka.querySelector('.icon-error');   // 錯(cuò)誤圖標(biāo)
        var domToastText = domToastWaka.querySelector('.text');   // 文字
        domToastText.innerHTML = text || '';
        switch (type) {
            case 'success':
                domIconSuccess.style.display = 'inline';
                domIconError.style.display = 'none';
                break;
            case 'error':
                domIconSuccess.style.display = 'none';
                domIconError.style.display = 'inline';
                break;
            default:
                domIconSuccess.style.display = 'none';
                domIconError.style.display = 'none';
                break;
        }
        domToastWaka.style.display = 'block';
        // 不傳的話默認(rèn)2s
        var that = this;
        this.hideTimeOut = setTimeout(function () {
            domToastWaka.style.display = 'none';
            that.hideTimeOut = null;    // 置 TimeOut 引用為空
        }, duration || 2000);
    },
    /**
     * 隱藏 Toast
     */
    hide: function () {
        // 如果 TimeOut 存在
        if (this.hideTimeOut) {
            // 清空 TimeOut 引用
            clearTimeout(this.hideTimeOut);
            this.hideTimeOut = null;
        }
        var domToastWaka = document.getElementById('toastWaka');
        if (domToastWaka) {
            domToastWaka.style.display = 'none';
        }
    }
};

Toast.init();
Toast.show('123', 'success', 10000);
setTimeout(function () {
    Toast.hide();
}, 3000);