实现多字符串循环逐个字符显示的前端功能开发问询

看起来你已经搭好了字符串切换的基础框架，但还缺了逐个字符打字显示的核心逻辑，以及完整的循环闭环处理。我来帮你把功能补全，让每个字符串都能像打字机一样逐个字符浮现，完成后自动切换下一个，无限循环运行。

核心思路拆解 #

• 先写一个专门处理「逐个字符输出」的函数，负责把单个字符串的字符逐步渲染到页面
• 在字符串切换逻辑里，调用这个打字函数，等当前字符串完全显示后再切换到下一个
• 用取余运算实现循环索引，避免复杂的长度判断，让轮完所有字符串后自动回到第一个

完整实现代码 #

<!-- 页面里需要准备好用来显示文本的元素 -->
<div id="sequence"></div>

<script>
const example = ['IT Solutions', 'Professional Work Ethic'];
let currentStringIndex = 0;

// 负责单个字符串的逐个字符打字效果
function typeString(element, text, charIndex = 0) {
  if (charIndex < text.length) {
    // 逐步截取字符串的前N个字符，实现打字效果
    element.innerHTML = text.slice(0, charIndex + 1);
    // 控制打字速度（150ms打一个字符，可根据需求调整）
    setTimeout(() => typeString(element, text, charIndex + 1), 150);
  } else {
    // 当前字符串完全显示后，等待2秒再切换下一个（时间可自定义）
    setTimeout(() => switchToNextString(), 2000);
  }
}

// 切换到下一个字符串的逻辑
function switchToNextString() {
  const sequenceElement = document.getElementById('sequence');
  // 清空当前内容，避免和下一个字符串重叠
  sequenceElement.innerHTML = '';
  // 更新索引，到达数组末尾后自动重置为0，实现循环
  currentStringIndex = (currentStringIndex + 1) % example.length;
  // 启动下一个字符串的打字流程
  typeString(sequenceElement, example[currentStringIndex]);
}

// 初始化启动整个流程
typeString(document.getElementById('sequence'), example[currentStringIndex]);
</script>

可自定义的细节 #

• 打字速度：修改typeString里的150ms，数值越小打字越快
• 字符串停留时长：调整切换前的2000ms，控制每个完整字符串的展示时间
• 字符串数组：直接修改example数组，就能添加/替换要循环展示的内容

这样整个功能就完全符合你的需求了：每个字符串逐个字符显示，完整后切换下一个，无限循环运行。

内容的提问来源于stack exchange，提问作者Dylan