🎯 总结对比
| 插件名 | 体积 | 自定义 | 动画丰富 | 推荐场景 |
|---|---|---|---|---|
| TypeIt | 中 | 很强 | 很丰富 | 高级动画、官网 |
| Typed.js | 小 | 一般 | 常用足够 | 个人/博客/主页 |
| t-writer.js | 中 | 很强 | 丰富 | 多样动画 |
| ityped | 极小 | 一般 | 简单 | 极简、加载快 |
1️⃣ TypeIt（超强大，推荐！）
🎉 特点：高自定义、易用、支持暂停、删除、换行等丰富动画
安装：
npm install typeit
# 或直接用 CDN
简单用法：
<div id="typeit"></div>
<script src="https://cdn.jsdelivr.net/npm/typeit@8.8.3/dist/typeit.min.js"></script>
<script>
new TypeIt("#typeit", {
strings: ["Hello, 掘金！", "我是打字机效果~"],
speed: 100,
breakLines: false,
loop: true
}).go();
</script>
2️⃣ Typed.js（最流行的打字机插件）
🚀 轻量、简单、社区大，支持多字符串轮播
安装：
npm install typed.js
# 或 CDN
用法：
<span id="typed"></span>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
new Typed('#typed', {
strings: ['欢迎来到掘金！', '一起学习前端吧~'],
typeSpeed: 80,
backSpeed: 40,
loop: true
});
</script>
3️⃣ t-writer.js（国人开发，API友好）
🔥 支持多种打字动画，API 设计简洁
安装：
npm install t-writer.js
用法：
<div id="twriter"></div>
<script src="https://cdn.jsdelivr.net/npm/t-writer.js/dist/t-writer.min.js"></script>
<script>
const target = document.getElementById('twriter');
const writer = new TypeWriter(target, {
loop: true,
typeColor: 'blue'
})
writer
.type('你好，掘金！')
.rest(500)
.changeOps({ typeColor: 'orange' })
.type('打字机效果轻松实现~')
.rest(1000)
.clear()
.start()
</script>
4️⃣ ityped（极简小巧）
⚡️ 零依赖，体积小，适合极简需求
安装：
npm install ityped
用法：
<div id="ityped"></div>
<script src="https://unpkg.com/ityped@1.0.3"></script>
<script>
ityped.init(document.querySelector("#ityped"), {
strings: ['Hello 掘金', '前端打字机效果'],
loop: true
})
</script>
🛠️ 补充：用原生 JS 实现简单打字效果
如果你不想引入第三方库，也可以用 setTimeout/async 实现基础打字动画：
<div id="simpleType"></div>
<script>
const text = "Hello, 掘金！这是原生JS打字机效果~";
let i = 0;
function typing() {
if (i < text.length) {
document.getElementById('simpleType').innerHTML += text[i];
i++;
setTimeout(typing, 100);
}
}
typing();
</script>
🌟 结语
- 需要高级动画，选 TypeIt/t-writer.js
- 需要轻量简单，选 Typed.js/ityped
- 只需基础效果，也可以原生 JS 10 行搞定！
