可实现打字机效果的五种方法：一、setInterval逐字追加；二、async/await封装可复用函数；三、CSS光标动画增强真实感；四、HTML解析支持格式标签；五、CSS@property纯CSS方案（需现代浏览器）。
如果您希望在HTML页面中实现类似打字机逐字显示文本的效果，则可以通过JavaScript控制文本的逐字符输出节奏。以下是几种可直接使用的实现方法：
一、使用setInterval实现基础打字效果
该方法通过定时器每隔固定毫秒数向目标元素追加一个字符，直到完整文本输出完毕。适用于静态文本且无需复杂交互的场景。
1、在HTML中创建一个用于显示文本的容器，例如：<div id="typewriter"></div>。
2、定义待显示的字符串，如 const text = "欢迎来到我的网页";。
立即学习“前端免费学习笔记（深入）”；
3、声明索引变量 let index = 0; 并获取目标元素 const el = document.getElementById("typewriter");。
4、调用 setInterval，每次执行时将 text.slice(0, ++index) 赋值给 el.textContent。
5、当 index > text.length 时，使用 clearInterval 停止定时器。
二、使用async/await与setTimeout封装函数
该方法将打字过程封装为可复用的异步函数，避免全局变量污染，支持链式调用和多段文本连续播放。
1、定义异步函数 async function typeText(el, text, delay = 100)，其中 el 是目标DOM元素，text 是要显示的字符串，delay 是每个字符间隔毫秒数。
2、在函数内部使用 for 循环遍历字符串，每次循环前 await new Promise(r => setTimeout(r, delay))。
3、循环中依次设置 el.textContent = text.slice(0, i + 1);。
4、调用时写为 typeText(document.getElementById("typewriter"), "Hello World!");。
三、添加光标闪烁动画增强真实感
仅显示字符不足以模拟真实打字机，需配合一个垂直竖线光标在末尾持续闪烁，提升视觉反馈。
1、在CSS中定义光标样式：@keyframes blink { 50% { opacity: 0; } }，并为类 .cursor 设置 animation: blink 1s infinite;。
2、在JavaScript中每次更新文本后，在末尾拼接 <span class="cursor">|</span>。
3、确保容器元素使用 white-space: nowrap; 防止光标换行。
4、若需暂停闪烁（如打字结束），可在完成时移除 .cursor 类或清空该 <span></span>。
四、支持HTML标签解析的增强型打字器
基础版本仅处理纯文本，若需保留粗体、换行等格式，必须对HTML字符串进行安全解析与逐步渲染。
1、将原始HTML字符串转换为节点数组，例如使用 new DOMParser().parseFromString(text, "text/html").body.childNodes。
2、遍历子节点，对文本节点逐字符拆分，对元素节点整体插入。
3、维护当前插入位置，每次只添加一个字符或一个完整内联元素（如 <strong></strong>）。
4、为防止XSS风险，所有输入内容必须经由textContent赋值或使用innerText，禁止直接innerHTML拼接未过滤的用户数据。
五、使用CSS @property与transition实现纯CSS方案
该方法利用CSS自定义属性与计数器特性，完全脱离JavaScript，适合静态内容且兼容性要求不高的现代浏览器。
1、在CSS中注册属性：@property --char-count { syntax: "<integer>"; initial-value: 0; inherits: false; }</integer>。
2、为目标元素设置 counter-set: chars var(--char-count); 与 content: counter(chars); 的伪元素。
3、使用 @keyframes 在指定时间内将 --char-count 从0增至文本长度。
4、此方案仅支持单行纯文本，且需Chrome 100+或Edge 100+等支持@property的浏览器。
