打字机效果通过JavaScript逐字符显示文本，常用setInterval或setTimeout实现定时输出，结合HTML元素动态更新内容，可添加光标闪烁、CSS动画等增强视觉效果，适用于标题、引导语等场景。
想要在网页上实现打字机效果，让文字像被逐个敲出一样显示，JavaScript 是一个非常实用的工具。这种效果常用于欢迎语、标题动画或引导提示，能增强页面的交互感和视觉吸引力。下面详细介绍几种常见的实现方式。
基本原理说明
打字机效果的核心是逐字符显示文本，通过定时器控制每隔一段时间插入一个字符，直到完整显示为止。通常结合 HTML 元素和 JS 操作 innerText 或 textContent 实现。
方法一：使用 setInterval 实现
这是最基础也最容易理解的方式。利用 setInterval 定期添加一个字符，直到全部输出。
const text = "Hello，欢迎来到我的网站！";
const element = document.getElementById("typewriter");
let index = 0;
function typeWriter() {
if (index < text.length) {
element.textContent += text.charAt(index);
index++;
} else {
clearInterval(timer); // 清除定时器
}
}
const timer = setInterval(typeWriter, 100); // 每100毫秒打一个字
这段代码会从左到右逐字显示内容。你可以调整时间间隔来控制“打字”速度。
立即学习“Java免费学习笔记（深入）”；
方法二：使用 setTimeout 递归调用
相比 setInterval，使用 setTimeout 更灵活，避免多个定时器冲突，适合一次性动画。
function typeText(element, text, index = 0) {
if (index < text.length) {
element.textContent += text.charAt(index);
setTimeout(() => typeText(element, text, index + 1), 100);
}
}
// 调用函数
const el = document.getElementById("typewriter");
typeText(el, "这是一段打字机动画。");
这种方式通过递归调用自身，每打一个字就启动下一个延时任务，逻辑清晰且易于控制流程。
进阶技巧与优化建议
- 支持光标闪烁：可以在末尾加一个竖线 "|" 并用 CSS 实现闪烁动画，模拟真实输入光标。
- CSS 配合动画：使用 opacity 或 width 动画增强视觉效果，比如配合 monospace 字体更像终端输入。
- 可重置与重复播放：在函数中清空元素内容后再开始，实现循环播放效果。
- 处理换行与HTML标签：若需支持换行符或标签，建议对文本做预处理，或改用 innerHTML（注意XSS风险）。
基本上就这些。打字机效果不复杂但容易忽略细节，比如定时器未清除、中文字符处理等。只要掌握核心思路——逐字符输出+定时控制，就能灵活应用在各种场景中。
