47 lines
1.4 KiB
JavaScript
47 lines
1.4 KiB
JavaScript
let notificationCount = 0; // 当前显示的提示框数量
|
|
|
|
function showNotification(type, message) {
|
|
// 判断是否有超过3个提示框
|
|
if (notificationCount >= 3) {
|
|
// 删除第一个（最早的）提示框
|
|
const firstNotification = document.querySelector('.notification');
|
|
if (firstNotification) {
|
|
firstNotification.remove();
|
|
notificationCount--;
|
|
}
|
|
}
|
|
|
|
// 创建新的提示框
|
|
const notification = document.createElement('div');
|
|
notification.classList.add('notification', type);
|
|
|
|
// 设置提示框图标和文本
|
|
const icon = document.createElement('div');
|
|
icon.classList.add('icon');
|
|
notification.appendChild(icon);
|
|
|
|
const text = document.createElement('div');
|
|
text.textContent = message;
|
|
notification.appendChild(text);
|
|
|
|
// 添加提示框到页面
|
|
const container = document.getElementById('notificationsContainer');
|
|
container.appendChild(notification);
|
|
|
|
// 增加提示框数量
|
|
notificationCount++;
|
|
|
|
// 设置5秒后自动消失
|
|
setTimeout(() => {
|
|
notification.style.opacity = 0;
|
|
setTimeout(() => notification.remove(), 500); // 完全消失后移除
|
|
notificationCount--;
|
|
}, 5000); // 5秒后渐渐消失
|
|
}
|
|
|
|
// 示例：调用方法
|
|
// showNotification('success', '文件已成功保存！');
|
|
// showNotification('warning', '保存的文件有部分丢失数据！');
|
|
// showNotification('error', '文件保存失败，请重试！');
|
|
// showNotification('info', '有新通知！');
|