完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯JS 可更新文本 等待弹窗</title>
<style>
body{background:#1a1a2e;color:#fff;font-family:sans-serif;padding:40px}
.demo-btn{padding:12px 24px;margin:10px;background:#0ff;border:none;border-radius:8px;cursor:pointer}
</style>
</head>
<body>
<button class="demo-btn" onclick="startMultiTask()">开始多任务演示</button>
<script>
// ==============================================
// 🔥 你要的：纯JS创建、可随时更新文本 的等待框
// ==============================================
const WaitingDialog = (function () {
let mask, dialog, textEl;
let created = false;
function create() {
if (created) return;
mask = document.createElement('div');
mask.style.cssText = `
position:fixed;top:0;left:0;right:0;bottom:0;
background:rgba(0,0,0,0.6);z-index:9999;display:none;
`;
dialog = document.createElement('div');
dialog.style.cssText = `
position:fixed;top:50%;left:50%;width:360px;padding:30px;
margin-left:-180px;margin-top:-160px;
background:#111;border:2px solid #0ff;border-radius:14px;
text-align:center;z-index:10000;display:none;
`;
// 旋转动画盒子
const box = document.createElement('div');
box.style.cssText = 'position:relative;width:150px;height:150px;margin:0 auto 20px';
const ring = document.createElement('div');
ring.style.cssText = `
position:absolute;width:100%;height:100%;border-radius:50%;
border:2px solid #0ff;box-shadow:0 0 18px #0ff,0 0 36px #0ff;
animation:pulse 2s infinite alternate;box-sizing:border-box;
`;
const rotateLine = document.createElement('div');
rotateLine.style.cssText = `
position:absolute;width:100%;height:100%;border-radius:50%;
border:3px solid transparent;border-top-color:#0ff;
animation:rotate 2s linear infinite;box-sizing:border-box;
`;
const inner = document.createElement('div');
inner.style.cssText = `
position:absolute;top:50%;left:50%;width:130px;height:130px;
background:#111;border-radius:50%;transform:translate(-50%,-50%);z-index:1;
`;
// 🔥 核心：这里专门用来动态更新文本
textEl = document.createElement('div');
textEl.style.cssText = 'color:#0ff;font-size:16px;margin-top:10px';
const style = document.createElement('style');
style.textContent = `
@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pulse{from{opacity:0.6}to{opacity:1}}
`;
box.appendChild(ring);
box.appendChild(rotateLine);
box.appendChild(inner);
dialog.appendChild(box);
dialog.appendChild(textEl);
document.body.appendChild(mask);
document.body.appendChild(dialog);
document.head.appendChild(style);
created = true;
}
return {
// 打开
show(text) {
create();
textEl.textContent = text;
mask.style.display = 'block';
dialog.style.display = 'block';
},
// 🔥 中途动态更新文字（你要的功能）
update(text) {
if (textEl) textEl.textContent = text;
},
// 关闭
hide() {
mask.style.display = 'none';
dialog.style.display = 'none';
}
};
})();
// ==============================================
// 扫码监听（你已经有的，我保留极简版）
// ==============================================
const ScanUtil = {
code: '', cb: null,
start(cb) { this.stop(); this.code = ''; this.cb = cb; document.addEventListener('keydown', this.fn) },
stop() { document.removeEventListener('keydown', this.fn); this.cb = null },
fn(e) {
if (e.key === 'Enter') {
e.preventDefault();
const c = ScanUtil.code.trim();
if (c && ScanUtil.cb) ScanUtil.cb(c);
ScanUtil.code = '';
} else if (e.key?.length === 1) {
ScanUtil.code += e.key;
}
}
};
// ==============================================
// 演示：多任务、多步骤、动态更新文本
// ==============================================
function startMultiTask() {
// 1. 打开等待
WaitingDialog.show('正在启动支付...');
setTimeout(() => {
// 2. 动态更新内容第一步
WaitingDialog.update('正在连接昭和先进CQ接口...');
}, 1200);
setTimeout(() => {
// 3. 第二步
WaitingDialog.update('正在查询订单状态...');
}, 2400);
setTimeout(() => {
// 4. 第三步
WaitingDialog.update('等待支付密码输入...');
}, 3600);
setTimeout(() => {
WaitingDialog.update('支付成功！');
setTimeout(() => WaitingDialog.hide(), 1500);
}, 5000);
}
</script>
</body>
</html>等待弹窗模块封装优势（以东方仙盟智能门禁进度为例）
1. 模块化封装，如同仙盟专属门禁法器（高内聚）
模块通过IIFE（立即执行函数）封装了弹窗的创建、显示、更新、隐藏等所有核心逻辑，对外只暴露show()、update()、hide()三个极简接口，就像仙盟为门禁系统打造的专属法器 ------ 内部符文（代码逻辑）复杂但使用时只需掐动特定法诀（调用接口），无需关心法器内部如何运转，既降低了使用门槛，也避免了内部逻辑被外部误改。
2. 懒创建 + 单例设计，如同门禁法阵 "按需启阵"（高性能）
模块内通过created标识实现 "首次调用才创建 DOM 元素" 的懒加载逻辑，且全程只创建一次弹窗 DOM，就像仙盟的智能门禁法阵 ------ 平时处于休眠状态，只有有人刷令牌（调用show()）时才启动，且一旦启动便常驻阵眼（内存），后续无需重复布阵（重复创建 DOM），大幅减少 DOM 操作开销，避免频繁创建 / 销毁元素导致的性能损耗。
3. 动态更新能力，如同门禁进度 "实时传讯"（高灵活）
专门设计update()方法支持中途修改弹窗文本，就像仙盟门禁验证时的进度传讯 ------ 从 "核验令牌铭文"（连接接口）到 "匹配仙盟身份"（查询订单），再到 "确认通行权限"（等待支付），每一步进度都能实时反馈给等待的弟子（用户），而非固定显示一句 "正在验证"，让用户清晰知晓当前流程节点，提升交互体验。
4. 样式与逻辑内聚，如同门禁法阵 "自成体系"（低耦合）
弹窗的样式（CSS）、动画（keyframes）、DOM 结构都封装在模块内部，不与外部页面样式冲突，就像仙盟的门禁法阵有独立的结界 ------ 不会与仙盟内其他法阵（页面其他样式 / 逻辑）互相干扰，即使页面其他样式调整，也不会影响门禁弹窗的显示效果，保证组件的稳定性。
总结
该等待弹窗模块封装的核心优势可归纳为三点：
- 易用性：高内聚封装 + 极简接口，如同调用仙盟法器般简单，无需关注内部实现；
- 性能：懒创建 + 单例设计，避免重复 DOM 操作，如同门禁法阵按需启阵，节省资源；
- 灵活性：支持动态更新文本，如同门禁实时反馈进度，适配多步骤任务的交互需求。
东方仙盟：拥抱知识开源，共筑数字新生态
在全球化与数字化浪潮中，东方仙盟始终秉持开放协作、知识共享的理念，积极拥抱开源技术与开放标准。我们相信，唯有打破技术壁垒、汇聚全球智慧，才能真正推动行业的可持续发展。
开源赋能中小商户：通过将前端异常检测、跨系统数据互联等核心能力开源化，东方仙盟为全球中小商户提供了低成本、高可靠的技术解决方案，让更多商家能够平等享受数字转型的红利。
共建行业标准：我们积极参与国际技术社区，与全球开发者、合作伙伴共同制定开放协议与技术规范，推动跨境零售、文旅、餐饮等多业态的系统互联互通，构建更加公平、高效的数字生态。
知识普惠，共促发展：通过开源社区、技术文档与培训体系，东方仙盟致力于将前沿技术转化为可落地的行业实践，赋能全球合作伙伴，共同培育创新人才，推动数字经济的普惠式增长
阿雪技术观
在科技发展浪潮中，我们不妨积极投身技术共享。不满足于做受益者，更要主动担当贡献者。无论是分享代码、撰写技术博客，还是参与开源项目维护改进，每一个微小举动都可能蕴含推动技术进步的巨大能量。东方仙盟是汇聚力量的天地，我们携手在此探索硅基生命，为科技进步添砖加瓦。
Hey folks, in this wild tech - driven world, why not dive headfirst into the whole tech - sharing scene? Don't just be the one reaping all the benefits; step up and be a contributor too. Whether you're tossing out your code snippets, hammering out some tech blogs, or getting your hands dirty with maintaining and sprucing up open - source projects, every little thing you do might just end up being a massive force that pushes tech forward. And guess what? The Eastern FairyAlliance is this awesome place where we all come together. We're gonna team up and explore the whole silicon - based life thing, and in the process, we'll be fueling the growth of technology