当前位置：首页 > JavaScript

js怎么实现打字效果

2026-04-04 16:46:42JavaScript

实现打字效果的方法

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

使用定时器和字符串截取

通过setInterval或setTimeout定时更新显示文本，模拟逐字打印的效果。

js怎么实现打字效果

function typeWriter(text, element, speed) {
  let i = 0;
  const timer = setInterval(() => {
    if (i < text.length) {
      element.textContent += text.charAt(i);
      i++;
    } else {
      clearInterval(timer);
    }
  }, speed);
}

// 调用示例
const targetElement = document.getElementById('typing-effect');
typeWriter('Hello, World!', targetElement, 100);

使用CSS动画配合JavaScript

结合CSS的animation和JavaScript控制文本显示，实现更平滑的效果。

js怎么实现打字效果

function typeWithCSS(text, element) {
  element.textContent = text;
  element.style.animation = `typing ${text.length / 10}s steps(${text.length}, end)`;
}

// CSS部分
/*
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
*/

使用异步函数和`async/await`

通过异步函数模拟逐字打印，代码更清晰。

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

// 调用示例
const targetElement = document.getElementById('typing-effect');
typeWriterAsync('Hello, World!', targetElement, 100);

添加光标效果

通过动态添加和移除光标元素，增强打字效果的视觉体验。

function typeWriterWithCursor(text, element, speed) {
  let i = 0;
  const cursor = document.createElement('span');
  cursor.className = 'cursor';
  element.appendChild(cursor);

  const timer = setInterval(() => {
    if (i < text.length) {
      element.insertBefore(document.createTextNode(text.charAt(i)), cursor);
      i++;
    } else {
      clearInterval(timer);
      element.removeChild(cursor);
    }
  }, speed);
}

// CSS部分
/*
.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #000;
  animation: blink 1s infinite;
}
@keyframes blink {
  50% { opacity: 0 }
}
*/