纯 JavaScript 逐字显示效果

纯 JavaScript 逐字显示效果（循环打字机效果）

通过 setInterval 实现逐字输出，支持动态速度控制

一次性打字机效果

js示例函数代码：

function typeWriter(text, elementId, speed = 100) {    let i = 0;    const container = document.getElementById(elementId);    container.innerHTML = "";        const timer = setInterval(() => {        if (i >= text.length) {            clearInterval(timer);            return;        }        container.innerHTML += text.charAt(i);        i++;    }, speed); } // 调用示例 typeWriter("欢迎访问本站！", "text-container");

循环打字机效果

js示例函数代码：

function typeWriter(text, elementId, speed = 100) {

    let i = 0;

    let isDeleting = false;

    const container = document.getElementById(elementId);

    let timer;

    function startTyping() {

        timer = setInterval(() => {

            if (!isDeleting) {

                // 打字阶段

                if (i <= text.length) {

                    container.innerHTML = text.substring(0, i);

                    i++;

                } else {

                    clearInterval(timer); // 清除打字定时器

                    isDeleting = true;

                    // 开启删除前等待1秒

                    setTimeout(() => startDeleting(), 3000);

                }

            }

        }, speed);

    }

    function startDeleting() {

        timer = setInterval(() => {

            if (i > 0) {

                container.innerHTML = text.substring(0, --i);

            } else {

                clearInterval(timer);

                isDeleting = false;

                typeWriter(text, elementId, speed); // 重新循环

            }

        }, speed / 2);

    }

    startTyping();

}

增强代码，代码添加了循环开关和删除文字开关

js示例代码：

function typeWriter(text, elementId, speed = 100, loop = true, del = true) {

    let i = 0;

    let isDeleting = false;

    const container = document.getElementById(elementId);

    let timer;

    function startTyping() {

        timer = setInterval(() => {

            if (!isDeleting) {

                if (i <= text.length) {

                    container.innerHTML = text.substring(0, i);

                    i++;

                } else {

                    clearInterval(timer);

                    isDeleting = true;

                    setTimeout(() => startDeleting(), 3000); // 保持暂停逻辑

                }

            }

        }, speed);

    }

    function startDeleting() {

        timer = setInterval(() => {

            if (i > 0) {

                // 新增判断打完字后是否删除

                if (loop || del) container.innerHTML = text.substring(0, --i);

            } else {

                clearInterval(timer);

                isDeleting = false;

                // 新增循环判断

                if (loop) typeWriter(text, elementId, speed, loop); // 

            }

        }, speed / 2);

    }

    startTyping();

}

// 调用示例

typeWriter("欢迎访问本站！", "textcenten");

<p class="typewriter" id="textcenten"></p>

光标动画增强

添加 CSS 光标闪烁效果：

.typewriter::after {    content: "|";    animation: blink 1s infinite; } @keyframes blink { 50% { opacity: 0; } }