js怎么实现打字效果

实现打字效果的步骤

使用纯JavaScript实现打字效果，可以通过定时器和字符串截取模拟逐字显示的效果。

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('target');
typeWriter('这是要逐字显示的文字', targetElement, 100);

添加光标闪烁效果

为了增强视觉效果，可以添加一个闪烁的光标。

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

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

// CSS样式
.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background-color: black;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

支持删除效果

实现先打字后删除的循环效果。

function typeAndDelete(text, element, speed, delay) {
  let i = 0;
  let isDeleting = false;

  function tick() {
    const currentText = element.textContent;

    if (!isDeleting && i < text.length) {
      element.textContent = text.substring(0, i + 1);
      i++;
      setTimeout(tick, speed);
    } else if (isDeleting && i > 0) {
      element.textContent = text.substring(0, i - 1);
      i--;
      setTimeout(tick, speed / 2);
    } else {
      isDeleting = !isDeleting;
      setTimeout(tick, delay);
    }
  }

  tick();
}

使用CSS动画实现打字效果

纯CSS也可以实现类似效果，但灵活性较差。

.typewriter {
  overflow: hidden;
  border-right: 2px solid;
  white-space: nowrap;
  animation: typing 3s steps(30), blink-caret 0.5s step-end infinite;
}

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

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

使用第三方库

如果项目允许使用第三方库，Typed.js是一个成熟的选择。

// 引入Typed.js后
new Typed('#element', {
  strings: ['第一段文字', '第二段文字'],
  typeSpeed: 50,
  backSpeed: 30,
  loop: true
});

每种方法各有优缺点，纯JavaScript实现最灵活但代码量稍多，CSS实现简单但功能有限，第三方库功能丰富但增加依赖。根据项目需求选择合适方案。