前端实现打字效果

不带光标

只一次播放

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();