如何用js脚本制作文字打字机效果_js打字机动画脚本编写教程

function typeWriter(text, el, speed = 100) {
  const element = document.getElementById(el);
  let index = 0;
<p>function type() {
if (index < text.length) {
element.innerHTML += text.charAt(index);
index++;
setTimeout(type, speed); // 控制打字速度（毫秒）
}
}</p><p>type(); // 启动打字
}</p>

/* CSS样式 */
#typewriter::after {
  content: "|";
  margin-left: 5px;
  animation: blink 1s step-start infinite;
}
<p>@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}</p>

function loopTypeWriter(text, el, speed, delay = 2000) {
  const element = document.getElementById(el);
<p>function start() {
element.innerHTML = ''; // 清空内容
let index = 0;</p><pre class='brush:php;toolbar:false;'>function type() {
  if (index < text.length) {
    element.innerHTML += text.charAt(index);
    index++;
    setTimeout(type, speed);
  } else {
    // 打完后等待一段时间再重播
    setTimeout(start, delay);
  }
}

type();