原生 alert() 无法实现倒计时或自动关闭，因其完全阻塞 JS 执行；可行方案是用 div + setTimeout 模拟：创建遮罩层与自定义弹窗，手动控制显示、倒计时（let 声明计数器防闭包陷阱）、关闭及焦点管理。
JavaScript 的 alert() 无法倒计时或自动关闭
直接用原生 alert() 实现倒计时是不可能的——它会完全阻塞 JavaScript 执行，页面冻结，定时器（setTimeout、setInterval）根本不会触发。你看到的“倒计时 alert”基本都是假象，背后是自定义弹窗。
用 div + setTimeout 模拟带倒计时的提示框
真正可行的做法是遮罩层 + 自定义 div，手动控制显示、倒计时和关闭逻辑：
- 创建一个带
id="alert-box"的div，初始display: none - 用
innerHTML插入文字和一个<span id="countdown"></span>占位倒计时数字 - 调用
setTimeout启动倒计时循环（建议用let声明计数器变量，避免闭包陷阱） - 倒计时到 0 后调用
element.remove()或设display: none
示例关键片段：
function showCountdownAlert(msg, seconds = 3) {
const box = document.createElement('div');
box.id = 'alert-box';
box.innerHTML = `
<div style="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border:1px solid #ccc;padding:20px;z-index:9999;">
${msg} <span id="countdown">${seconds}</span> 秒后关闭
</div>
`;
document.body.appendChild(box);
let remaining = seconds;
const countdownEl = document.getElementById('countdown');
const timer = setInterval(() => {
remaining--;
countdownEl.textContent = remaining;
if (remaining <= 0) {
clearInterval(timer);
box.remove();
}
}, 1000);
}
为什么不用 confirm() 或 prompt() 做倒计时？
它们和 alert() 同属浏览器原生模态对话框，同样阻塞主线程，无法插入任何 JS 逻辑。试图在 confirm() 前启动倒计时，只会让倒计时卡在开始前；等用户点完按钮，倒计时早已超时或失效。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 所有原生对话框（
alert/confirm/prompt）都不支持 DOM 操作、样式定制、事件监听或中途干预 - 移动端 Safari 对原生对话框限制更严，多次调用可能被静默拦截
- 无障碍（a11y）和键盘焦点管理也完全不可控
真实项目中推荐用轻量库或封装函数
自己写遮罩+动画容易漏掉细节：ESC 关闭、点击背景关闭、焦点捕获、过渡动画、多实例互斥……
- 如果项目已用 Bootstrap，优先用
Bootstrap Toast（非模态，但可配 autohide + delay） - 纯前端小项目，可用
noty或toastify-js，它们都支持duration和回调 - 自己封装时，务必加
document.addEventListener('keydown', e => e.key === 'Escape' && close()) - 注意：倒计时若依赖用户交互（如“取消关闭”按钮），必须把
clearInterval绑定到按钮onclick，别只靠倒计时归零
最常被忽略的是焦点管理——自定义弹窗出现后，键盘 Tab 应该只在弹窗内循环，否则体验断裂。这点原生对话框自动做了，自己写就得补上 focusableElements 和 trapFocus 逻辑。
