点击页面空白地方试试
.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())
}