先定义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：目标元素的idspeed：每个字符之间的延迟时间（毫秒）
调用示例：
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 < text.length) { element.innerHTML += text.charAt(index); index++; setTimeout(type, speed); } else { // 打完后等待一段时间再重播 setTimeout(start, delay); }}type();
}
start();}
调用方式：
loopTypeWriter("这是一个循环打字效果", "typewriter", 100, 3000);
基本上就这些。通过控制字符输出节奏和简单的CSS动画，就能实现一个流畅自然的文字打字机效果。可根据实际需求扩展功能，比如支持多段文字轮播、暂停恢复等。不复杂但容易忽略细节，比如innerHTML拼接和异步执行顺序。
以上就是如何用js脚本制作文字打字机效果_js打字机动画脚本编写教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1539173.html
微信扫一扫 
支付宝扫一扫 
