如何实现HTML文本逐字连续显示效果？求对应实现代码

要实现逐字连续显示的效果，纯HTML无法完成，需要结合JavaScript来控制文本的逐字符输出。以下是完整的可直接运行的代码，满足你0.1秒显示一个字符的需求：

<!DOCTYPE html>
<html>
<head>
    <title>逐字显示效果</title>
    <style>
        /* 可选：自定义文本样式 */
        #typewriter {
            font-size: 18px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <!-- 用来承载逐字显示文本的容器 -->
    <div id="typewriter"></div>

    <script>
        // 定义要展示的目标文本
        const targetText = 'Hello there. My name is XYZ. I am doing this...';
        const displayElement = document.getElementById('typewriter');
        let currentIndex = 0;

        // 设置定时器，每隔100毫秒添加一个字符
        const typingTimer = setInterval(() => {
            if (currentIndex < targetText.length) {
                // 追加当前字符到容器中
                displayElement.textContent += targetText.charAt(currentIndex);
                currentIndex++;
            } else {
                // 文本全部显示完成后，清除定时器
                clearInterval(typingTimer);
            }
        }, 100);
    </script>
</body>
</html>

代码说明： #

• 用div#typewriter作为文本的显示容器，你可以根据需求替换成<p>标签或者其他元素
• targetText是你要展示的内容，直接修改即可
• setInterval的第二个参数100代表每次间隔100毫秒（即0.1秒），符合你的时间要求
• 当所有字符都输出完成后，clearInterval会停止定时器，避免不必要的执行

如果需要支持带HTML标签的内容，可以把displayElement.textContent替换为displayElement.innerHTML，但注意如果文本包含不可信内容，这种方式存在XSS风险，仅在文本是你自己可控的情况下使用。

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