基于js实现逐步显示文字输出代码实例

2023年5月28日上午4:35 • JavaScript

下面详细讲解一下基于js实现逐步显示文字输出的完整攻略。

1. 确定需求

在实现逐步显示文字的功能之前，首先需要确定需求。通常情况下，逐步显示文字的实现一般用于网站教程或者精美页面展示的文本展现，以吸引用户的注意，并且可以让用户有序地看到文本的信息，避免一次性将所有信息展现给用户，造成信息过载。

因此，在实现逐步显示文字的功能之前要先确认以下需求：

显示的文本内容
显示的速度及方式
显示的位置

2. 获取内容

在确认需求后，需要获取需要展示的文本内容。通常我们可以将需要展示的文本内容存储在一个数组中或从后台获取，这里我们将通过数组来存储展示的文本内容。

const textList = [
  '这是第一行文本。',
  '这是第二行文本。',
  '这是第三行文本。',
  '这是第四行文本。',
  '这是第五行文本。'
];

3. 显示方式

确定文本内容后，需要定义展示的方式。在这里，我们可以使用setInterval函数来控制文本的展示。

在setInterval函数中，我们可以设置一个计数器count，每次执行时，读取文本数组的第count个元素并将其展示出来，直到所有文本展示完毕为止。

const textList = [
  '这是第一行文本。',
  '这是第二行文本。',
  '这是第三行文本。',
  '这是第四行文本。',
  '这是第五行文本。'
];

let count = 0;
const intervalId = setInterval(() => {
  console.log(textList[count]);
  if (count >= textList.length - 1) clearInterval(intervalId);
  else count++;
}, 1000);

在这个例子中，我们使用setInterval函数每1秒钟输出一行文本，直到所有文本都被展示出来。

4. 渲染页面

在这里，我将给出一个完整的示例代码，在其中，我将采用div标签来渲染文本，以及CSS来控制文本的显示效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>基于JS实现逐步显示文字输出</title>
  <style>
    .text {
      font-size: 24px;
      line-height: 36px;
      opacity: 0;
      transition: opacity .4s ease-in-out;
    }
    .text.showing {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="text">这是第一行文本</div>
  <div class="text">这是第二行文本</div>
  <div class="text">这是第三行文本</div>
  <div class="text">这是第四行文本</div>
  <div class="text">这是第五行文本</div>

  <script>
    const textList = document.querySelectorAll('.text');

    let count = 0;
    const intervalId = setInterval(() => {
      textList[count].classList.add('showing');
      if (count >= textList.length - 1) clearInterval(intervalId);
      else count++;
    }, 1000);
  </script>
</body>
</html>

在这个例子中，我们首先使用querySelectorAll函数获取了页面中所有的text元素，并将其存储在一个数组中。然后，我们定义了一个count和一个intervalId，count表示当前展示到的文本索引，而intervalId则表示计时器的唯一标识，以便于后续清除。

在setInterval函数中，我们每隔1秒钟就将textList数组中的第count个元素的showing类添加上去，使其在页面中显现出来，并通过判断count是否已经达到文本数组的长度来决定计时器的停止。