如何用js脚本制作文字打字机效果_js打字机动画脚本编写教程
先定义HTML容器和JS函数实现逐字显示，再通过setTimeout控制打字节奏，配合CSS光标动画增强视觉效果，最后可扩展循环播放功能。
实现文字打字机效果的JavaScript脚本并不复杂，关键在于逐字显示文本，并配合一定的延迟时间。下面介绍如何用原生JS编写一个简单高效的打字机动画脚本，适用于网页标题、引导语等场景。
1. 基本HTML结构
先准备一个用于显示打字效果的容器：
这个div将动态显示逐个出现的文字。
2. 编写核心JS逻辑
使用setTimeout或setInterval控制字符逐个输出。以下是一个简洁有效的实现方式：
function typeWriter(text, el, speed = 100) {
const element = document.getElementById(el);
let index = 0;
function type() {
if (index < text.length) {
element.innerHTML += text.charAt(index);
index++;
setTimeout(type, speed); // 控制打字速度（毫秒）
}
}
type(); // 启动打字
}
参数说明：
- text：要显示的完整字符串
- el：目标元素的id
- speed：每个字符之间的延迟时间（毫秒）
调用示例：
typeWriter("欢迎来到我的网站！", "typewriter", 150);
3. 添加光标闪烁效果
为了让效果更真实，可以添加一个闪烁的光标：
/* CSS样式 */
#typewriter::after {
content: "|";
margin-left: 5px;
animation: blink 1s step-start infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
这样会在文字末尾显示一个竖线光标，并持续闪烁。
4. 支持重复播放与清屏
如果需要循环播放，可以在打字结束后清空内容再重新开始：
function loopTypeWriter(text, el, speed, delay = 2000) {
const element = document.getElementById(el);
function start() {
element.innerHTML = ''; // 清空内容
let index = 0;
function type() {
if (index zuojiankuohaophpcn text.length) {
element.innerHTML += text.charAt(index);
index++;
setTimeout(type, speed);
} else {
// 打完后等待一段时间再重播
setTimeout(start, delay);
}
}
type();}
start();
}
调用方式：
loopTypeWriter("这是一个循环打字效果", "typewriter", 100, 3000);
基本上就这些。通过控制字符输出节奏和简单的CSS动画，就能实现一个流畅自然的文字打字机效果。可根据实际需求扩展功能，比如支持多段文字轮播、暂停恢复等。不复杂但容易忽略细节，比如innerHTML拼接和异步执行顺序。
