打字机效果实现：随机文案逐字显示

本文介绍了如何用纯 JavaScript 实现网页加载时随机选取一句文案并以流畅、可控的逐字打字机效果动态呈现，既避免了第三方库的冗余依赖，又通过随机性与动态感显著提升加载页的专业度与用户好感度；方案兼顾安全性（采用 `.text()` 防 XSS）、性能（`setTimeout` 精准控制）和可维护性（20 行精简代码、无缝集成现有结构），还贴心提供了 CSS 协同建议与加载完成同步隐藏等最佳实践，让品牌化加载体验触手可及。

本文详解如何在网页加载遮罩层中，动态选取随机文案，并通过纯 JavaScript 实现平滑、可控的逐字打字机效果，兼容现代浏览器且无需第三方库。

在构建品牌化加载页（Loader）时，静态文字易显单调，而加入随机性与动态打字效果，可显著提升用户体验与视觉专业度。本文提供一套轻量、可靠、零依赖的实现方案——基于原生 JavaScript 实现「随机文案 + 逐字 Typewriter 效果」，完美适配您已有的 CSS 加载器结构。

✅ 核心逻辑解析

关键问题在于：原始代码中 txt 被错误赋值为整个 quotes 数组，导致 txt.charAt(i) 报错（数组无 charAt 方法）。修正后需确保：

• 随机选取单条字符串（randno）作为待打字文本；
• #element 容器预先留空，避免重复插入或 HTML 解析干扰；
• 打字函数 typeWriter() 在 DOM 就绪后立即调用，而非仅定义。

以下是优化后的完整 JavaScript 实现（含健壮性增强）：

$(document).ready(function () {
    const quotes = [
        "Loading sweet video's...",
        "Loading... One pixel at a time...",
        "Lights, camera, action...",
        "Framing imagination, crafting reality..."
    ];

    // 1. 随机选取一条文案
    const randno = quotes[Math.floor(Math.random() * quotes.length)];

    // 2. 初始化空容器（确保 DOM 中存在 #element）
    $('#element').text(''); // 更安全：使用 .text() 避免 XSS 风险

    let i = 0;
    const speed = 50; // 毫秒/字符，可调快慢

    // 3. 打字机主函数
    function typeWriter() {
        if (i < randno.length) {
            // 使用 textContent 或 .text() 替代 innerHTML，防标签注入
            $('#element').text(randno.substring(0, i + 1));
            i++;
            setTimeout(typeWriter, speed);
        }
    }

    // 4. 启动效果
    typeWriter();
});

⚠️ 注意事项与最佳实践

• 安全性优先：使用 .text() 而非 .innerHTML 插入内容，防止意外 HTML 标签执行或 XSS 漏洞（即使当前文案为纯文本，也应养成习惯）；
• 性能友好：setTimeout 方案简洁高效，避免 setInterval 可能引发的清理遗漏；如需暂停/重置，可封装为可控制类；
• CSS 协同建议：为 #element 添加 white-space: nowrap; overflow: hidden; 可防止长句换行打断打字节奏；配合 transition: opacity 0.3s 实现淡入更自然；
• 加载完成衔接：您现有的 window.addEventListener("load", ...) 逻辑正确，但建议将 .loader--hidden 的添加时机与打字完成同步（例如在 typeWriter 结束回调中触发隐藏），避免文字未打完就消失。

✅ 总结

该方案摒弃了 Typed.js 等外部库的体积与配置复杂度，以约 20 行精简代码达成高可靠性效果。它精准解决「多文案随机 + 动态逐字渲染」的核心需求，且与您的现有 HTML/CSS 架构无缝集成。只需复制上述脚本，替换 quotes 数组内容，即可快速部署具备品牌温度的加载体验。

理论要掌握，实操不能落！以上关于《打字机效果实现：随机文案逐字显示》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！