前端小项目Notification 弹出定时消失的提示框

涉及知识点

• flex 布局
• CSS position定位&z-index层级
• 原生JS操作DOM常用方法
• 原生JS操作class属性
• JS 定时器、计时器

介绍

每点击一下按钮，窗口右下角就弹出一个消息框，后一个消息框放在前一个的下面，并且每个消息框的显示时间都一样，显示时间达到后，此消息框消失。

思路：窗口右下角定位一个盒子，用来放消息框，盒子高度由消息框撑开。按钮点击后，生成一个消息框（div标签+文案+样式类），并设置定时器清除消息框节点，把消息框添加到右下角盒子里。

⚠️ 待改进：给消息框的显示和消失设置过渡效果。

代码

html:

<button>Toast Notification</button>
<div class="toasts"></div>

css:

body{
    
    
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rebeccapurple;
}
button{
    
    
    background-color: #ffffff;
    color: rebeccapurple;
    font-family: inherit;
    font-weight: bold;
    padding: 1rem;
    border-radius: 5px;
    border: 1px solid rebeccapurple;
    cursor: pointer;
}
.notification{
    
    
    border: 1px solid;
    margin-top: 10px;
    background-color: white;
    transition: 1s;
    border-radius: 10px;
    padding: 10px 30px;
}
.toasts{
    
    
    position: absolute;
    right: 20px;
    bottom: 20px;
}

javascript:

let toasts = document.querySelector('.toasts')
let i = 0
let TIME = 2000
document.querySelector('button').addEventListener('click',()=>{
    
    
    let div = document.createElement('div')
    div.innerText = `message ${
      
      i++}`
    div.classList.add('no')
    div.classList.add('notification')
    toasts.appendChild(div)
    setTimeout(()=>{
    
    
        div.remove()
    },TIME)
})