前端实现打字效果

不带光标

只一次播放

HTML

<!-- 需要在初始化的时候不显示文字 -->
<div id="typing"></div>

CSS

#typing {
    position: relative;
    font-size: 24px;
    font-family: Arial, sans-serif;
    padding: 10px;
}

JS

const text = "要显示的文本 Hello, World! 要显示的文本"; // 要显示的文本
const typingSpeed = 36; // 打字速度（每个字符的延迟时间）

const typingEffect = document.getElementById("typing"); // 获取元素
let index = 0; // 当前显示到字符索引

function typeNextCharacter() {
    if (index < text.length) {
        // 显示的内容
        typingEffect.textContent += text.charAt(index);
        index++;
        setTimeout(typeNextCharacter, typingSpeed);
    }
}

无线播放

HTML

<!-- 需要在初始化的时候不显示文字 -->
<div id="typing"></div>

CSS

#typing {
    position: relative;
    font-size: 24px;
    font-family: Arial, sans-serif;
    padding: 10px;
}

JS

const text = "要显示的文本 Hello, World! 要显示的文本"; // 要显示的文本
const typingSpeed = 36; // 打字速度（每个字符的延迟时间）

const typingEffect = document.getElementById("typing"); // 获取元素
let index = 0; // 当前显示到字符索引

(function typeNextCharacter() {
    if (index < text.length) {
        // 显示的内容
        typingEffect.textContent += text.charAt(index);
        index++;
        setTimeout(typeNextCharacter, typingSpeed);
    } else {
        typingEffect.textContent = "";
        index = 0;
        setTimeout(typeNextCharacter, typingSpeed);
    }
})();

带光标

HTML

<!-- 需要在初始化的时候不显示文字 -->
<div id="typing"></div>

CSS

#typing {
    position: relative;
    font-size: 24px;
    font-family: Arial, sans-serif;
    padding: 10px;
}
#typing::after {
    position: absolute;
    content: "|";
    animation: typing 1s linear infinite;
}

@keyframes typing {
    0%,
    49% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0;
    }
}

JS

const text = "要显示的文本 Hello, World! 要显示的文本"; // 要显示的文本
const typingSpeed = 36; // 打字速度（每个字符的延迟时间）

const typingEffect = document.getElementById("typing"); // 获取元素
let index = 0; // 当前显示到字符索引

function typeNextCharacter() {
    if (index < text.length) {
        // 显示的内容
        typingEffect.textContent += text.charAt(index);
        index++;
        setTimeout(typeNextCharacter, typingSpeed);
    } 
}

typeNextCharacter();