当前位置：首页 > 文章列表 > 文章 > 前端 > 4种JS代码实现炫酷文字打字机特效，超简单！

4种JS代码实现炫酷文字打字机特效，超简单！

2025-06-20 11:18:12 0浏览收藏

1. 使用`setInterval`和字符串截取

这是最基础的方法，通过setInterval定时器，每次截取字符串的一部分并更新显示。

const text = "Hello, world! This is a typewriter effect.";
const element = document.getElementById("typewriter");
let index = 0;

function typeWriter() {
  if (index < text.length) {
    element.innerHTML += text.charAt(index);
    index++;
    setTimeout(typeWriter, 50); // 调整速度，数值越小越快
  }
}

typeWriter(); // 启动打字机效果

优点: 简单易懂，容易上手。 缺点: 依赖setInterval，在某些情况下可能出现性能问题，例如浏览器标签页被切换到后台时，定时器可能会被延迟。

2. 使用`requestAnimationFrame`和字符串截取

requestAnimationFrame比setInterval更适合处理动画，因为它会根据浏览器的刷新率来执行动画，更加平滑和高效。

const text = "Another typewriter effect using requestAnimationFrame.";
const element = document.getElementById("typewriter2");
let index = 0;

function typeWriter() {
  if (index < text.length) {
    element.innerHTML = text.substring(0, index + 1);
    index++;
    requestAnimationFrame(typeWriter);
  }
}

typeWriter();

优点: 性能更好，动画更流畅，能更好地适应不同的浏览器环境。 缺点: 稍微复杂一些，需要理解requestAnimationFrame的用法。

3. 使用CSS `steps()` 函数

纯CSS也可以实现打字机效果，利用animation和steps()函数。

Typewriter effect with CSS

优点: 完全不需要JavaScript，性能极佳，代码简洁。 缺点: 灵活性较低，难以实现复杂的动画效果，例如删除、暂停等。

4. 使用第三方库

有一些第三方库专门用于处理文字动画，例如Typed.js。

优点: 功能强大，可以实现各种复杂的文字动画效果，使用简单。 缺点: 需要引入第三方库，增加了项目的依赖。

如何让打字机效果支持删除和回退？

在使用JavaScript实现打字机效果时，可以通过修改typeWriter函数来支持删除和回退。例如，可以添加一个backspace函数，在满足特定条件时，减少index的值并更新element.innerHTML。

const text = "Typing and deleting effect.";
const element = document.getElementById("typewriter4");
let index = 0;
let isDeleting = false;

function typeWriter() {
  if (!isDeleting && index < text.length) {
    element.innerHTML += text.charAt(index);
    index++;
    setTimeout(typeWriter, 50);
  } else if (isDeleting && index > 0) {
    element.innerHTML = text.substring(0, index - 1);
    index--;
    setTimeout(typeWriter, 50);
  } else {
    isDeleting = !isDeleting;
    setTimeout(typeWriter, 1000); // 暂停一段时间后开始删除或重新输入
  }
}

typeWriter();

这段代码在输入完成后，会暂停一段时间，然后开始删除文字，再暂停一段时间后重新输入。

如何在打字机效果中加入HTML标签？

直接将HTML标签插入到字符串中可能会导致显示问题。一个解决方法是在每次更新element.innerHTML时，先创建一个临时的DOM元素，将包含HTML标签的字符串赋值给这个元素的innerHTML，然后再将这个元素的innerHTML赋值给目标元素。

const textWithHTML = "This is bold text with link.";
const element = document.getElementById("typewriter5");
let index = 0;

function typeWriter() {
  if (index < textWithHTML.length) {
    let tempElement = document.createElement('div');
    tempElement.innerHTML = textWithHTML.substring(0, index + 1);
    element.innerHTML = tempElement.innerHTML;
    index++;
    setTimeout(typeWriter, 50);
  }
}

typeWriter();

这种方法可以确保HTML标签被正确解析和显示。

如何优化打字机效果的性能？

避免频繁操作DOM：尽量减少对element.innerHTML的直接操作，可以先将要显示的文字拼接成一个字符串，然后一次性更新innerHTML。
使用requestAnimationFrame：requestAnimationFrame比setInterval更适合处理动画，因为它会根据浏览器的刷新率来执行动画，更加平滑和高效。
减少不必要的计算：避免在每次更新时都进行复杂的计算，可以将一些计算结果缓存起来，提高性能。
使用CSS实现简单的效果：如果只需要简单的打字机效果，可以考虑使用CSS来实现，避免使用JavaScript，提高性能。

以上就是《4种JS代码实现炫酷文字打字机特效，超简单！》的详细内容，更多关于打字机效果的资料请关注golang学习网公众号！

打字机效果