如何基于现有HTML/CSS/JS代码实现单页多段落逐字打字效果？

以下是满足需求的完整代码实现，包含标题居中、标题逐字输出、段落延迟触发的逐字效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逐字打字效果</title>
    <style>
        h1 {
            text-align: center;
            margin: 2rem 0;
            font-size: 2rem;
        }
        .text-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 1rem;
            line-height: 1.8;
            font-size: 1.1rem;
        }
        p {
            margin-bottom: 1.5rem;
        }
    </style>
</head>
<body>
    <h1 id="main-title"></h1>
    <div class="text-container">
        <p id="paragraph-1"></p>
        <p id="paragraph-2"></p>
        <p id="paragraph-3"></p>
    </div>

    <script>
        // 封装通用逐字打字函数
        function typeText(element, targetText, speed, onComplete) {
            let charIndex = 0;
            element.textContent = '';
            
            function writeNextChar() {
                if (charIndex < targetText.length) {
                    element.textContent += targetText.charAt(charIndex);
                    charIndex++;
                    setTimeout(writeNextChar, speed);
                } else {
                    onComplete?.();
                }
            }
            writeNextChar();
        }

        // 定义要展示的文本内容
        const titleContent = "这是居中的标题文本";
        const paragraphContents = [
            "第一段段落内容：标题完成打字后，我会延迟2秒再开始逐字输出。",
            "第二段段落内容：和标题一样，我每个字的输出间隔也是100毫秒。",
            "第三段段落内容：作为最后一段，我会在第二段完成后继续逐字展示。"
        ];

        // 先执行标题的打字效果
        typeText(document.getElementById('main-title'), titleContent, 100, () => {
            // 标题完成后延迟2秒，开始处理段落
            setTimeout(() => {
                let paraIndex = 0;
                function processNextParagraph() {
                    if (paraIndex < paragraphContents.length) {
                        const currentPara = document.getElementById(`paragraph-${paraIndex + 1}`);
                        typeText(currentPara, paragraphContents[paraIndex], 100, () => {
                            paraIndex++;
                            processNextParagraph();
                        });
                    }
                }
                processNextParagraph();
            }, 2000);
        });
    </script>
</body>
</html>

关键修改说明 #

1. 标题居中：通过CSS给h1添加text-align: center属性实现标题居中，同时调整margin和字体大小优化整体排版。
2. 复用打字逻辑：封装typeText通用函数，支持传入目标元素、文本内容、打字速度和完成回调，避免重复编写相同逻辑。
3. 顺序控制：
   • 优先执行标题的打字效果，在标题完成的回调中设置2秒延迟。
   • 延迟结束后按顺序逐个处理段落，每个段落完成打字后再触发下一段落的效果，保证文本展示的连贯性。
4. 文本分离管理：所有展示文本单独定义在变量中，后续修改内容无需改动DOM和逻辑代码，维护更便捷。

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