JS打字机效果实现方法详解

珍惜时间，勤奋学习！今天给大家带来《JS打字机效果实现教程》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

先定义HTML容器和JS函数实现逐字显示，再通过setTimeout控制打字节奏，配合CSS光标动画增强视觉效果，最后可扩展循环播放功能。

实现文字打字机效果的JavaScript脚本并不复杂，关键在于逐字显示文本，并配合一定的延迟时间。下面介绍如何用原生JS编写一个简单高效的打字机动画脚本，适用于网页标题、引导语等场景。

1. 基本HTML结构

先准备一个用于显示打字效果的容器：

<div id="typewriter"></div>

这个div将动态显示逐个出现的文字。

2. 编写核心JS逻辑

使用setTimeout或setInterval控制字符逐个输出。以下是一个简洁有效的实现方式：

function typeWriter(text, el, speed = 100) {
  const element = document.getElementById(el);
  let index = 0;
<p>function type() {
if (index < text.length) {
element.innerHTML += text.charAt(index);
index++;
setTimeout(type, speed); // 控制打字速度（毫秒）
}
}</p><p>type(); // 启动打字
}</p>

参数说明：

• text：要显示的完整字符串
• el：目标元素的id
• speed：每个字符之间的延迟时间（毫秒）

调用示例：

typeWriter("欢迎来到我的网站！", "typewriter", 150);

3. 添加光标闪烁效果

为了让效果更真实，可以添加一个闪烁的光标：

/* CSS样式 */
#typewriter::after {
  content: "|";
  margin-left: 5px;
  animation: blink 1s step-start infinite;
}
<p>@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}</p>

这样会在文字末尾显示一个竖线光标，并持续闪烁。

4. 支持重复播放与清屏

如果需要循环播放，可以在打字结束后清空内容再重新开始：

function loopTypeWriter(text, el, speed, delay = 2000) {
  const element = document.getElementById(el);
<p>function start() {
element.innerHTML = ''; // 清空内容
let index = 0;</p><pre class="brush:php;toolbar:false;">function type() {
  if (index &lt; text.length) {
    element.innerHTML += text.charAt(index);
    index++;
    setTimeout(type, speed);
  } else {
    // 打完后等待一段时间再重播
    setTimeout(start, delay);
  }
}

type();

}

start(); }

调用方式：

loopTypeWriter("这是一个循环打字效果", "typewriter", 100, 3000);

基本上就这些。通过控制字符输出节奏和简单的CSS动画，就能实现一个流畅自然的文字打字机效果。可根据实际需求扩展功能，比如支持多段文字轮播、暂停恢复等。不复杂但容易忽略细节，比如innerHTML拼接和异步执行顺序。

终于介绍完啦！小伙伴们，这篇关于《JS打字机效果实现方法详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！