求助：用JavaScript实现类似displaay.net菜单的文字随机切换动画

现成实现思路 #

无需依赖外部库，用原生JavaScript就能实现类似效果，核心逻辑为：

• 将目标文本的每个字符单独包裹在容器中
• 逐个字符替换为随机字符，循环若干次后切换到目标字符
• 控制切换速度和随机字符范围，保证动画流畅且视觉友好

你的代码问题分析 #

当前代码存在几个关键问题导致效果异常：

1. 字符替换时直接将span标签存入数组，innerHTML拼接后出现嵌套span，破坏DOM结构
2. 切换到新标题后未重新将字符拆分为单独容器，下一次动画无法逐个修改字符
3. 随机字符范围包含所有ASCII可打印字符，会出现符号、标点等不符合预期的内容

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .char-wrap {
            display: inline-block;
        }
    </style>
</head>
<body>
    <h1 class="_H1">Text1</h1>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const titles = ['Text1', 'Text12', 'Text3'];
            let currentIndex = 0;
            const targetElement = document.querySelector('._H1');
            const randomCharPool = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; // 限制随机字符范围

            // 初始化字符容器
            function initCharWrappers(text) {
                targetElement.innerHTML = text.split('').map(char => `<span class="char-wrap">${char}</span>`).join('');
                return targetElement.querySelectorAll('.char-wrap');
            }

            // 单个字符动画：随机切换多次后变为目标字符
            function animateChar(charElement, targetChar, cycles = 8) {
                if (cycles <= 0) {
                    charElement.textContent = targetChar;
                    return;
                }
                const randomChar = randomCharPool[Math.floor(Math.random() * randomCharPool.length)];
                charElement.textContent = randomChar;
                setTimeout(() => animateChar(charElement, targetChar, cycles - 1), 50);
            }

            // 整体切换动画
            function changeTitle() {
                currentIndex = (currentIndex + 1) % titles.length;
                const targetText = titles[currentIndex];
                const charElements = initCharWrappers(targetElement.textContent);
                
                // 逐个触发字符动画，添加延迟形成瀑布流效果
                charElements.forEach((el, index) => {
                    setTimeout(() => animateChar(el, targetText[index]), index * 100);
                });
            }

            // 初始启动+定时循环
            setTimeout(changeTitle, 2000);
            setInterval(changeTitle, 5000);
        });
    </script>
</body>
</html>

关键优化点 #

• 固定随机字符池，仅使用字母和数字，避免杂乱符号
• 每个字符单独用span包裹，彻底解决DOM嵌套问题
• 单个字符循环多次随机切换后再显示目标字符，更贴近参考网站的效果
• 添加瀑布流延迟，让字符动画逐个触发，视觉更流畅

内容的提问来源于stack exchange，提问作者user24042628