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())
}