通知系统用原生JS实现：创建右下角绝对定位容器，通过JS动态填充内容并设display为block显示，配合setTimeout定时3秒后设display为none隐藏，支持手动关闭清除定时器，可扩展队列或多条堆叠。
用 JavaScript 实现一个通知系统，核心是控制消息元素的显示、内容填充和定时隐藏。不需要框架，原生 JS 就能搞定，关键在于逻辑清晰、样式可控、行为可靠。
创建通知 DOM 结构
先准备一个用于承载通知的容器，一般固定在右下角，避免干扰主界面：
- 用 div 作为通知面板，设置 position: absolute; bottom: 20px; right: 20px;
- 给它加 z-index: 1000 确保始终在最上层
- 初始状态设为 display: none，需要时再显示
用 JS 控制显示与内容填充
定义一个函数，接收消息文本，动态写入并显示：
- 获取通知容器元素，如 document.getElementById('notify')
- 设置 innerHTML 填充消息内容（可含 HTML 标签）
- 把 style.display 改为 'block' 或 'flex' 让它出现
- 可顺便添加淡入动画，比如加个 opacity: 0 → 1 的 CSS 过渡
自动隐藏通知
显示后启动计时器，到时隐藏：
立即学习“Java免费学习笔记（深入）”；
- 用 setTimeout 设置延迟，比如 3000 毫秒后执行隐藏
- 隐藏方式推荐 style.display = 'none'（完全移出布局流）
- 也可用 style.opacity = 0 配合过渡实现淡出效果，再设 display = 'none'
- 注意：如果用户手动点击关闭，应清除定时器，避免重复操作
支持多条通知依次弹出
若需连续触发不覆盖，可以简单队列化：
- 维护一个数组存储待显示的消息
- 每次只显示第一条，隐藏后再 shift() 下一条
- 或让新通知从底部向上堆叠，每条独立控制自己的定时器
基本上就这些。结构轻量、逻辑直接，适配大多数项目场景。
