JavaScript实现消息通知浮窗自动消失的核心是手动创建DOM元素、控制显隐、定时销毁；1.用fixed定位右下角容器，每条通知独立div并支持堆叠；2.动态插入时添加淡入动画并setTimeout定时remove；3.关闭按钮需clearTimeout防止内存泄漏；4.附带轻量CSS动画与原生JS示例。
JavaScript 中实现消息通知浮窗自动消失，核心是“手动创建 DOM 元素 + 控制显隐 + 定时销毁”，不依赖原生 alert（它无法自动关闭），而是用自定义 HTML + CSS + JS 组合完成。关键在于结构清晰、触发可控、定时可靠、体验自然。
1. 创建右下角固定定位的通知容器
推荐将通知区域固定在页面右下角，避免遮挡主内容，也符合用户浏览习惯：
- 用一个
<div id="notify-container">作为父容器，初始设为display: none或空状态 - CSS 设置：
position: fixed; bottom: 20px; right: 20px; z-index: 9999; - 每条通知单独生成
<div class="notification">，包含文字、可选图标和关闭按钮 - 支持堆叠：新通知从下往上推，或逐条依次出现（非覆盖）
2. 动态插入通知并启动自动关闭计时器
调用函数如 showNotification("操作成功", 3000) 时，执行以下逻辑：
- 动态创建
div.notification，填充文本内容（支持简单 HTML） - 添加淡入过渡类（如
animate-fade-in），再设style.display = "block" - 用
setTimeout启动倒计时，时间到后执行隐藏+移除操作 -
必须保存定时器 ID：用于后续手动关闭时
clearTimeout，防止重复执行
3. 支持手动关闭与安全清理
用户点击 × 按钮或通知本身时，应立即关闭且不触发残留定时器：
立即学习“Java免费学习笔记（深入）”；
- 为每个通知绑定
click事件监听器，对关闭按钮调用remove() - 在关闭前调用
clearTimeout(timerId)，避免隐藏后仍尝试操作已不存在的 DOM - 可选：添加淡出动画——先加
animate-fade-out类，transitionend后再remove()
4. 简单可用的代码示例
无需框架，几行原生 JS 即可运行：
function showNotification(msg, duration = 3000) {
const container = document.getElementById('notify-container');
const notif = document.createElement('div');
notif.className = 'notification';
notif.innerHTML = `
<span>${msg}</span>
<button class="close-btn">×</button>
`;
const closeBtn = notif.querySelector('.close-btn');
const timer = setTimeout(() => notif.remove(), duration);
closeBtn.onclick = () => {
clearTimeout(timer);
notif.remove();
};
container.appendChild(notif);
notif.style.display = 'block'; // 触发 CSS 过渡
}
// 页面加载后确保容器存在
if (!document.getElementById('notify-container')) {
const container = document.createElement('div');
container.id = 'notify-container';
document.body.appendChild(container);
}
CSS 示例（配合上面 JS）：
#notify-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
}
.notification {
background: #4CAF50;
color: white;
padding: 12px 20px;
margin-bottom: 8px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
display: inline-block;
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.close-btn {
float: right;
background: none;
border: none;
color: white;
cursor: pointer;
font-weight: bold;
margin-left: 10px;
}
