JavaScript简易打字机动画：实现循环往复效果需求

原代码的问题在于文本打完后仅重置了计数器并清除定时器，没有清空已输入的内容，也未重新启动打字逻辑。只需做以下几步修改，就能实现循环播放的效果：

修改后的完整代码 #

<body>
    <h1 id="main-text">
        <span id="sp1"></span>
    </h1>

    <script>
        const sp1 = document.getElementById("sp1");
        const txt1 = "this is the main text!!!";
        let cnt = 0;
        let typingInterval;

        // 封装打字逻辑为函数，方便重复调用
        function typeText() {
            typingInterval = setInterval(() => {
                const letter = document.createTextNode(txt1[cnt]);
                sp1.appendChild(letter);
                cnt++;
                // 当文本全部输出后，清空内容并重新开始
                if (cnt >= txt1.length) {
                    clearInterval(typingInterval);
                    // 延迟1秒后清空并重启（可根据需求调整延迟时间）
                    setTimeout(() => {
                        sp1.innerHTML = "";
                        cnt = 0;
                        typeText();
                    }, 1000);
                }
            }, 200);
        }

        // 启动第一次打字
        typeText();
    </script>
</body>

关键改动说明 #

• 封装打字逻辑为typeText函数，方便完成一轮后重复调用
• 当文本全部输出后，添加延迟（可自定义时长），清空span内容、重置计数器，再启动下一轮打字
• 移除原代码中无效的txt1Handle变量（这行代码试图通过文本内容获取元素，完全错误）
• 将无需重新赋值的变量改为const，优化代码规范性

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