原生 alert() 无法实现倒计时或自动关闭，因其完全阻塞 JS 执行；可行方案是用 div + setTimeout 模拟：创建遮罩层与自定义弹窗，手动控制显示、倒计时（let 声明计数器防闭包陷阱）、关闭及焦点管理。

JavaScript 的 alert() 无法倒计时或自动关闭

直接用原生 alert() 实现倒计时是不可能的——它会完全阻塞 JavaScript 执行，页面冻结，定时器（setTimeout、setInterval）根本不会触发。你看到的“倒计时 alert”基本都是假象，背后是自定义弹窗。

用 div + setTimeout 模拟带倒计时的提示框

真正可行的做法是遮罩层 + 自定义 div，手动控制显示、倒计时和关闭逻辑：

• 创建一个带 id="alert-box" 的 div，初始 display: none
• 用 innerHTML 插入文字和一个 占位倒计时数字
• 调用 setTimeout 启动倒计时循环（建议用 let 声明计数器变量，避免闭包陷阱）
• 倒计时到 0 后调用 element.remove() 或设 display: none

示例关键片段：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

confirm()

• 所有原生对话框（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 逻辑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！