当前位置：首页 > JavaScript

js实现打字

2026-02-01 08:18:37JavaScript

实现打字效果的方法

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

使用setInterval逐字显示文本

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

// 使用示例
const targetElement = document.getElementById('typing-text');
typeWriter('Hello, this is a typing effect!', targetElement, 100);

使用async/await实现更流畅的打字效果

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

// 使用示例
const target = document.querySelector('.typing-demo');
asyncTypeWriter('This is an async typing effect.', target, 150);

添加光标闪烁效果

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

  const interval = setInterval(() => {
    if (i < text.length) {
      const char = document.createTextNode(text.charAt(i));
      element.insertBefore(char, cursor);
      i++;
    } else {
      clearInterval(interval);
      // 可选：打字完成后移除或停止光标闪烁
      cursor.style.animation = 'none';
      cursor.style.opacity = '0';
    }
  }, speed);
}

// CSS样式
.cursor {
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

支持删除效果

async function typeAndDelete(fullText, element, typeSpeed, deleteSpeed, pause) {
  while (true) {
    // 打字阶段
    for (let i = 0; i <= fullText.length; i++) {
      element.textContent = fullText.substring(0, i);
      await new Promise(resolve => setTimeout(resolve, typeSpeed));
    }

    // 暂停
    await new Promise(resolve => setTimeout(resolve, pause));

    // 删除阶段
    for (let i = fullText.length; i >= 0; i--) {
      element.textContent = fullText.substring(0, i);
      await new Promise(resolve => setTimeout(resolve, deleteSpeed));
    }
  }
}

使用CSS动画增强效果

可以为打字效果添加CSS过渡效果，使文字显示更加平滑：

js实现打字

.typing-container {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #000; /* 模拟光标 */
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #000 }
}

这些方法可以根据具体需求进行组合和调整，创造出各种不同的打字效果。实际应用中，可以根据项目需求选择最适合的实现方式。

标签: js