js 实现 toast

.bw-toast{
    box-sizing: border-box;
    position: fixed;
    right: calc(50% - 200px);
    height: 36px;
    width: 400px;
    border-radius: 3px;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    padding: 10px 10px;
    background-color: #000;
    transition: all .1s;
}

var bw = {};
bw.list = [];
bw.toast = function( txt ){
    var i = 38;
    if( bw.list.length ){
        bw.list.forEach( function(element, index) {
            element.setAttribute('style', 'bottom: '+(bw.list.length-index)*i+'px;');
        });
    }
    var toast = document.createElement('div');
    toast.classList = 'bw-toast';
    toast.setAttribute('style', 'bottom: -36px;');
 
    var msg = document.createTextNode(txt);
    toast.append(msg);
    bw.list.push(toast);
    document.body.append(toast);
 
    setTimeout(function(){
        toast.setAttribute('style', 'bottom: 0px;');
    }, 0)
    setTimeout(function(){
        toast.parentNode.removeChild(toast);
        bw.list.shift();
    }, 2000)
}
 
document.body.onclick = function(){
    bw.toast(new Date())
}