如何用JavaScript实现循环交替文字的打字机效果

核心修改思路 #

• 添加索引变量跟踪当前显示的单词位置，删除完成后切换至下一个单词，索引超出数组长度时重置为0，实现无限循环
• 在删除完当前单词的逻辑末尾，触发下一个单词的打字机效果，形成持续链式调用

修改后的完整代码 #

HTML（无需改动） #

<div class="slog-container__text">
    <p>NOS ENCANTA CREAR</p>
    <p></p> <!-- 用于显示动态单词 --> 
</div>

JavaScript #

const contenedorParrafo = document.querySelector(`.slog-container__text`);
const parrafo = contenedorParrafo.lastElementChild;

const arrPalabras = [`SOLUCIONES`, `ARTE`, `IDEAS`];
let currentIndex = 0; // 记录当前要显示的单词索引

const maquina = () => {
    const palabra = arrPalabras[currentIndex];
    let arrCaracteres = palabra.split(``); 
    let i = 0;

    // 逐字符显示单词
    const mostrarCaracteres = setInterval(() => {
        if (i === arrCaracteres.length) {
            clearInterval(mostrarCaracteres);
            // 停顿1秒后开始逐字符删除
            setTimeout(() => {
                const quitarCaracteres = setInterval(() => {
                    arrCaracteres.pop();
                    parrafo.textContent = arrCaracteres.join(``); 
                    
                    if (arrCaracteres.length === 0) {
                        clearInterval(quitarCaracteres);
                        // 更新索引，循环切换单词
                        currentIndex = (currentIndex + 1) % arrPalabras.length;
                        // 启动下一轮打字机效果
                        maquina();
                    } 
                }, 150);
            }, 1000);
        } else {
            parrafo.textContent += arrCaracteres[i]; 
            i++;
        }
    }, 150);
}

// 初始化启动效果
maquina();

关键修改说明 #

• 索引循环机制：通过(currentIndex + 1) % arrPalabras.length实现索引自动重置，当遍历到数组最后一个单词后，自动回到第一个单词
• 链式调用触发：在当前单词完全删除后，立即调用maquina()启动下一个单词的显示逻辑，保证效果持续循环
• 优化DOM操作：把原代码的innerHTML改为textContent，更适合纯文本操作，避免潜在的XSS风险和不必要的DOM解析

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