前端小项目Notification 弹出定时消失的提示框_notification 设置消失时间-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39706777/article/details/121352800

这篇博客介绍了如何利用Flex布局和JavaScript实现窗口右下角的消息提示框功能。每次点击按钮，会在指定位置生成一个消息框，新消息框会覆盖旧消息框，并在设定时间后自动消失。代码中涉及到CSS定位、z-index、原生JS操作DOM、添加和移除class以及使用定时器。目前的消息框显示和消失没有过渡动画，作者指出这是待改进的地方。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

涉及知识点

介绍

每点击一下按钮，窗口右下角就弹出一个消息框，后一个消息框放在前一个的下面，并且每个消息框的显示时间都一样，显示时间达到后，此消息框消失。
请添加图片描述
思路：窗口右下角定位一个盒子，用来放消息框，盒子高度由消息框撑开。按钮点击后，生成一个消息框（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)
})