如何使打字机效果重复 - Javascript

在网页设计中，打字机效果是一种很有趣的视觉效果，它会让文字逐个字的出现，仿佛像是打字员在打字一样。但是如果你想让这种效果重复出现，该怎么办呢？在本文中，我们将介绍如何使用Javascript实现打字机效果的重复。

实现思路

首先我们需要了解打字机效果的基本原理。我们需要从一段文本中逐个字符的读取出来，每隔一段时间将其添加到页面中的某个位置。为了实现重复效果，我们可以将读取的文本保存到数组中，每次读取完毕后再从数组的开头开始读取。

代码实现

HTML部分

我们需要在HTML页面中添加一个用于显示打字机效果的区域，初始化时可以将其隐藏起来。

<div id="typewriter" style="display:none"></div>

Javascript部分

我们需要编写两个函数：一个用于读取文本，另一个用于将字符添加到页面中。

读取文本函数

该函数将文本逐个字符的读取出来，保存到一个数组中。

function getTextArray(text) {
  const arr = text.split('');
  return arr;
}

添加字符函数

该函数将读取的字符逐个添加到页面中的某个位置，实现打字机效果。

function addToPage(element, textArray, index, interval) {
  if (index < textArray.length) {
    element.innerHTML += textArray[index];
    index++;
    setTimeout(() => {
      addToPage(element, textArray, index, interval);
    }, interval);
  }
}

初始化函数

该函数用于初始化文字内容及打字机参数。

function initTypewriter(elementId, text, interval) {
  const element = document.getElementById(elementId);
  element.style.display = 'block';
  const textArray = getTextArray(text);
  let index = 0;
  addToPage(element, textArray, index, interval);

  // 重复效果
  setInterval(() => {
    element.innerHTML = '';
    index = 0;
    addToPage(element, textArray, index, interval);
  }, (interval + 100) * textArray.length);
}

调用

最后，我们需要调用初始化函数并传递参数。

initTypewriter('typewriter', 'Hello world!', 100);

展示效果

在浏览器中运行该程序，将会得到以下效果：

H
He
Hel
Hell
Hello
Hello 
Hello w
Hello wo
Hello wor
Hello worl
Hello world

该效果会一直重复出现，形成如下效果：

Hello world!Hello world!Hello world!...

总结

本文中，我们介绍了如何使用Javascript实现打字机效果的重复。我们了解了打字机效果的实现原理，编写了两个函数，实现了打字机效果及重复效果。该效果可以应用于网页设计中，增强用户体验，为网页注入生命力。