一個簡單的js消息提示框

調用完成後的消息提示框

之前因為寫一些驗證，會在調用成功或者失敗後用到一些消息提示框，但找了很多了沒找到比較合适的，對于一些架構中的元件感覺用着也不是很友善，于是自己用js寫了一個簡單的提示框，代碼如下：

function showMessage(message,type,time) {
        let str = ''
        switch (type) {
            case 'success':
                str = '<div class="success-message" style="width: 300px;height: 40px;text-align: center;background-color:#daf5eb;;color: rgba(59,128,58,0.7);position: fixed;left: 43%;top: 10%;line-height: 40px;border-radius: 5px;z-index: 9999">\n' +
                    '    <span class="mes-text">'+message+'</span></div>'
                break;
            case 'error':
                str = '<div class="error-message" style="width: 300px;height: 40px;text-align: center;background-color: #f5f0e5;color: rgba(238,99,99,0.8);position: fixed;left: 43%;top: 10%;line-height: 40px;border-radius: 5px;;z-index: 9999">\n' +
                    '    <span class="mes-text">'+message+'</span></div>'
        }
        $('body').append(str)
        setTimeout(function () {
            $('.'+type+'-message').remove()
        },time)
    }
           

以上就是寫好的js代碼，我們通過下面的方法調用提示框：

showMessage('添加成功','success',1000)
           

這樣就可以完成一次提示框的調用，其中第一個參數是提示框的内容，第二個參數是這裡是success，代表成功的提示框，這裡隻隻是success或者error，success提示框為淡綠色，error為淡紅色，第三個參數是提示框消失時間，這裡1000表示1000ms，也就是一秒，傳入這三個參數就可以完成提示框的調用啦，如需要更多類型提示框，可以在case裡繼續添加，希望你們能喜歡，有可以優化的地方也可以提出寶貴的意見