使用JavaScript定时器逐字添加字符,结合CSS光标动画实现打字机效果。示例中通过setTimeout每100ms向页面元素追加一个字符,直至完整显示“Hello!欢迎来到我的网页。”,并支持扩展多行文本、调节速度与删除重打功能。

要在HTML中实现打字机效果,也就是让文字像打字一样逐字显示,可以通过JavaScript控制文本的逐个输出。这种动画常用于欢迎语、标题展示或引导性内容,增强页面的交互感。
基本原理
打字机动画的核心思路是:
- 定义一段要显示的完整文本
- 通过JavaScript定时器(如 setTimeout 或 setInterval)逐个添加字符到页面元素中
- 每过一定时间(例如100毫秒)显示下一个字符,直到全部显示完毕
实现步骤
下面是一个简单可运行的示例:
打字机效果
增强功能建议
你可以根据需要扩展功能:
立即学习“Java免费学习笔记(深入)”;
- 支持多行文本:用数组存储多句话,前一句打完再打下一句
- 控制光标闪烁:使用CSS动画实现更自然的光标效果(如上例中的 @keyframes blink)
- 可配置速度:把打字间隔设为变量,方便调整快慢
- 支持删除重打:模拟真实打字机,打错后退格重写,可用反向定时器清除字符
注意事项
实际使用时注意以下几点:
- 避免在移动设备上设置过快的打字速度,影响阅读体验
- 如果文本较长,考虑提供“跳过动画”按钮
- SEO角度:搜索引擎可能无法读取动态生成的文本,重要信息建议仍以静态HTML为主











