用原生 JavaScript 实现一个打字机效果
在做网页交互或个人主页的时候，我们经常会看到一种很酷的 打字机效果：文字像人手敲出来一样，一个字一个字显示，还伴随着光标的闪烁。这个效果能为页面增添不少灵动感。
这篇文章，我会带大家用 原生 JavaScript（不依赖任何库）实现一个小而美的打字机效果。
效果展示
文字会像这样逐字打印出来，并且光标会随着文字移动：
Hello，欢迎来到我的文章。
这是一个用原生 JavaScript 实现的打字机效果。
光标闪烁在最后，就像真的在敲字一样。
核心代码
我们先写一个容器，用来放文字和光标：
<div id="typewriter"></div>
接着用 JavaScript 来实现逐字打印：
const text = `Hello，欢迎来到我的文章。
这是一个用原生 JavaScript 实现的打字机效果。
希望你也能在项目里试试看！`;
const container = document.getElementById("typewriter");
// 光标元素
const cursor = document.createElement("span");
cursor.className = "cursor";
cursor.textContent = "|";
container.appendChild(cursor);
let index = 0;
function type() {
if (index < text.length) {
// 在光标前插入一个新字符
cursor.insertAdjacentText("beforebegin", text.charAt(index));
index++;
setTimeout(type, 100); // 每100ms打一个字
}
}
type();
最后，加上光标闪烁的样式：
.cursor {
display: inline-block;
margin-left: 2px;
animation: blink 0.7s infinite;
}
@keyframes blink {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}
这样，一个简洁的打字机效果就完成了 🎉
实现原理
实现的核心思路其实很简单：
- 创建光标元素：用一个
<span>|</span>模拟光标，并加上闪烁动画。 - 逐字打印：使用
setTimeout控制节奏，每次将一个字符插入到光标前。 - 光标跟随：光标始终保持在文字的最后，随着打印自然移动。
可以优化的点
- 速度控制：可以在
setTimeout里加入随机延迟，让打字速度更贴近人类手感。 - 暂停效果：在遇到标点符号（如
，。！）时适当延迟，提升自然感。 - 多段文字：可以分段打印，模拟聊天或文章的排版。
- 删除功能：加上退格效果，可以实现循环打字。
拓展玩法
- 打造一个 个人简历网站，在首页用打字机效果展示自我介绍。
- 在 博客文章 中插入逐字展示的标题或段落，提升阅读体验。
- 与 Canvas / SVG 动画 结合，做更炫酷的交互效果。
总结
一个简洁的打字机效果，其实只需要 原生 JavaScript + 一点点 CSS 就能搞定。核心就在于 控制文字插入节奏 和 光标的闪烁移动。
希望这篇文章对你有帮助！如果你在项目中用到了类似的效果，欢迎留言交流。
