当前位置：首页 > JavaScript

js怎么实现打字效果

2026-01-31 00:53:34JavaScript

实现打字效果的方法

在JavaScript中实现打字效果可以通过多种方式完成，以下是几种常见的实现方法：

使用定时器和字符串拼接

通过setInterval或setTimeout定时器逐步显示文本内容，模拟打字效果。

const text = "Hello, this is a typing effect!";
let index = 0;
const element = document.getElementById("typing-element");

function typeWriter() {
  if (index < text.length) {
    element.innerHTML += text.charAt(index);
    index++;
    setTimeout(typeWriter, 100);
  }
}

typeWriter();

使用CSS动画配合JavaScript

结合CSS的animation和JavaScript动态控制文本显示。

const text = "This is another typing effect example.";
const element = document.getElementById("typing-element");
let i = 0;

function type() {
  if (i < text.length) {
    element.textContent += text[i];
    i++;
    setTimeout(type, 150);
  }
}

type();

使用递归和Promise

通过递归和Promise实现更复杂的打字效果，如删除和重新打字。

async function typeEffect(element, text, speed) {
  for (let i = 0; i < text.length; i++) {
    element.textContent += text[i];
    await new Promise(resolve => setTimeout(resolve, speed));
  }
}

const element = document.getElementById("typing-element");
typeEffect(element, "Async typing effect with promises.", 100);

使用第三方库

利用现成的JavaScript库如Typed.js快速实现打字效果。

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
  const typed = new Typed('#typing-element', {
    strings: ["First sentence.", "Second sentence."],
    typeSpeed: 50,
    backSpeed: 30,
    loop: true
  });
</script>

自定义打字效果的扩展

通过调整延迟时间、添加光标动画或颜色变化增强视觉效果。

const text = "Custom typing effect with cursor.";
const element = document.getElementById("typing-element");
let i = 0;

function type() {
  if (i < text.length) {
    element.innerHTML = text.substring(0, i + 1) + '<span class="cursor">|</span>';
    i++;
    setTimeout(type, 100);
  } else {
    element.innerHTML = text;
  }
}

type();