JavaScript打字机效果通过定时器逐字符显示字符串：维护索引并用textContent动态更新，支持暂停、重置、速度调节；可添加CSS光标动画与完成回调，兼顾富文本安全与移动端兼容性。
用 JavaScript 实现打字机效果，核心是逐个字符显示字符串，配合 setTimeout 或 setInterval 控制节奏，再结合 DOM 更新实现视觉反馈。
基础实现：逐字追加 + 定时器
最直接的方式是维护一个当前显示的子字符串，每次增加一个字符，用 setTimeout 递归调用：
- 定义原始文本和当前索引（初始为 0）
- 每次执行时截取
text.slice(0, index)赋值给元素的textContent或innerText - 索引加 1，若未超长则用
setTimeout延迟下一次执行 - 可选：末尾加闪烁光标（如
|），通过类切换或定时显隐模拟
增强控制：支持暂停、重置与速度调节
把逻辑封装成函数或类，暴露方法便于交互：
- 用
clearTimeout存储上一次定时器 ID，实现“暂停”和“继续” - 提供
reset()方法清空已显示内容并重置索引 - 将打字间隔（如 100ms）设为可配置参数，支持运行时调整速度
- 可监听键盘事件（如空格键）触发暂停/继续，提升体验
优化体验：光标动画与完成回调
真实打字机感不仅靠字符出现，还依赖视觉细节：
- 用 CSS 实现竖线光标（
border-right: 2px solid;+animation脉冲或 blink）比 JS 切换更流畅 - 打字结束后自动移除光标样式，或替换为其他符号（如 ✓）
- 添加
onComplete回调，在全部字符显示完毕后执行后续动作（如显示按钮、播放音效） - 对包含 HTML 标签的富文本，需用
innerHTML并注意 XSS 风险，建议先做简单转义或仅允许白名单标签
简洁实用示例（无依赖）
以下是一个可直接运行的轻量版本：
function typewriter(el, text, delay = 100) {
let i = 0;
const timer = setInterval(() => {
if (i < text.length) {
el.textContent = text.slice(0, ++i);
} else {
clearInterval(timer);
el.classList.add('finished');
}
}, delay);
}
// 使用：typewriter(document.getElementById('demo'), 'Hello, world!');
不复杂但容易忽略细节：记得在开始前清空目标元素内容，避免残留；移动端要注意 textContent 对换行符的处理，必要时用 <br> 替代。
