如何用js脚本制作文字打字机效果

文字打字机效果是前端页面中常见的动画形式，通过逐字显示文本内容模拟真实的打字过程，能够提升页面的趣味性和用户的阅读体验。实现这个效果的核心逻辑是通过定时器逐步截取并渲染目标文本，同时配合光标闪烁增强真实感。

核心实现思路

打字机效果的实现主要分为三个步骤：首先定义需要展示的完整文本内容和当前已渲染的字符索引，然后通过定时器每隔固定时间增加一个字符到渲染内容中，最后当所有字符渲染完成后清除定时器，同时可以添加光标闪烁效果完善视觉体验。

基础版本实现

下面是一个最基础的打字机效果实现代码，不需要依赖任何第三方库，直接在原生js环境中即可运行：

// 定义要展示的完整文本
const targetText = "欢迎来到我的个人博客，这里会分享前端开发相关的技术内容";
// 获取展示文本的容器元素
const textContainer = document.getElementById("typewriter-text");
// 当前已渲染的字符索引，初始为0
let currentIndex = 0;
// 打字速度，单位是毫秒，数值越小速度越快
const typeSpeed = 100;

// 定义打字函数
function typeWriter() {
  // 如果当前索引小于文本总长度，继续添加字符
  if (currentIndex < targetText.length) {
    // 截取从0到当前索引+1的字符，赋值给容器
    textContainer.textContent = targetText.slice(0, currentIndex + 1);
    currentIndex++;
    // 设置定时器，间隔指定时间后再次执行打字函数
    setTimeout(typeWriter, typeSpeed);
  }
}

// 页面加载完成后启动打字效果
window.onload = function() {
  typeWriter();
};

对应的HTML结构只需要一个用于展示文本的容器即可：

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

添加光标闪烁效果

真实的打字机通常会有闪烁的光标，我们可以通过CSS动画实现这个效果，增强动画的真实感：

/* 光标样式 */
.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background-color: #333;
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 1s infinite;
}

/* 光标闪烁动画 */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

修改JS代码，在文本渲染完成后添加光标元素，同时调整HTML结构：

const targetText = "欢迎来到我的个人博客，这里会分享前端开发相关的技术内容";
const textContainer = document.getElementById("typewriter-text");
let currentIndex = 0;
const typeSpeed = 100;

function typeWriter() {
  if (currentIndex < targetText.length) {
    textContainer.textContent = targetText.slice(0, currentIndex + 1);
    currentIndex++;
    setTimeout(typeWriter, typeSpeed);
  } else {
    // 文本渲染完成后添加光标元素
    const cursor = document.createElement("span");
    cursor.className = "cursor";
    textContainer.appendChild(cursor);
  }
}

window.onload = function() {
  typeWriter();
};

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

常见场景适配

调整打字速度

只需要修改typeSpeed变量的值即可调整打字速度，比如设置为50会让打字速度更快，设置为200则会更慢。如果需要实现变速效果，可以在不同字符位置设置不同的间隔时间，比如遇到标点符号时增加停顿时间：

const targetText = "你好，欢迎来到这里。今天我们来学习打字机效果的实现。";
const textContainer = document.getElementById("typewriter-text");
let currentIndex = 0;
const baseSpeed = 100;

function typeWriter() {
  if (currentIndex < targetText.length) {
    textContainer.textContent = targetText.slice(0, currentIndex + 1);
    currentIndex++;
    // 判断当前字符是否为标点，是的话停顿时间加倍
    let currentSpeed = baseSpeed;
    const currentChar = targetText[currentIndex - 1];
    if (["，", "。", "！", "？", ",", ".", "!", "?"].includes(currentChar)) {
      currentSpeed = baseSpeed * 2;
    }
    setTimeout(typeWriter, currentSpeed);
  } else {
    const cursor = document.createElement("span");
    cursor.className = "cursor";
    textContainer.appendChild(cursor);
  }
}

window.onload = function() {
  typeWriter();
};

支持多行文本

如果目标文本包含换行符，需要在渲染时处理换行，将n转换为HTML的<br>标签：

const targetText = "第一行内容n第二行内容n第三行内容";
const textContainer = document.getElementById("typewriter-text");
let currentIndex = 0;
const typeSpeed = 100;

function typeWriter() {
  if (currentIndex < targetText.length) {
    // 先截取未处理的文本
    let tempText = targetText.slice(0, currentIndex + 1);
    // 将换行符替换为br标签
    tempText = tempText.replace(/n/g, "<br>");
    // 使用innerHTML渲染，注意这里的内容是可控的，不存在XSS风险
    textContainer.innerHTML = tempText;
    currentIndex++;
    setTimeout(typeWriter, typeSpeed);
  } else {
    const cursor = document.createElement("span");
    cursor.className = "cursor";
    textContainer.appendChild(cursor);
  }
}

window.onload = function() {
  typeWriter();
};

注意事项

• 如果文本内容是动态获取的，需要确保文本加载完成后再启动打字函数，避免出现渲染异常。
• 当页面有多个打字机效果实例时，需要为每个实例单独定义索引和定时器，避免相互干扰。
• 如果需要在打字完成后执行其他逻辑，可以在currentIndex >= targetText.length的条件分支中添加对应的回调函数。

javascript打字机效果动画脚本文字动画修改时间：2026-06-21 21:42:36