js怎样实现文字打字机效果 js文字打字机动画的4种实现方式

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(); // 启动打字机效果

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();

<style>
#typewriter3 {
  width: 22ch; /* 设置容器宽度，等于字符数量 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  border-right: .15em solid orange; /* 添加一个闪烁的光标 */
  animation: typing 4s steps(22, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 22ch }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}
</style>

<p id="typewriter3">Typewriter effect with CSS</p>

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<span id="typed-output"></span>
<script>
  var typed = new Typed('#typed-output', {
    strings: ['First sentence.', 'Second sentence.'],
    typeSpeed: 50,
  });
</script>

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();

const textWithHTML = "This is <b>bold</b> text with <a href='#'>link</a>.";
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();