前端实现打字效果
不带光标
只一次播放
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();
