项目简介：
本文介绍如何用原生JavaScript实现一个简洁的打字效果，支持：
-
多段文字循环播放
-
打字完后暂停一会儿
-
逐字删除，形成打字机动画感
-
打字光标闪烁效果
项目适合用于首页欢迎语、提示语等动态文本展示，能提升页面交互体验。
✨核心思路：
-
文本数组：维护一个文字数组
texts，依次轮播显示。 -
打字与删除状态：用状态变量控制当前是“打字”还是“删除”。
-
计时器定时执行：用
setInterval实现每隔固定时间打出一个字或删去一个字。 -
暂停控制：文字全部打完后暂停一段时间，再开始删除。
-
循环播放：删除完毕切换到下一条文字，循环播放。
-
光标闪烁：用CSS动画实现。
💡 技术点练习：
-
用状态变量区分“打字”和“删除”
-
用
setInterval控制时间节奏 -
使用
slice截取字符串部分显示 -
通过
setTimeout实现暂停效果 -
利用CSS动画
@keyframes blink和steps(1)实现文字后光标闪烁
页面结构（HTML 参考）：
<p id="typeText" class="typing-text"></p>实践代码如下：
CSS：
.typing-text::after {content: '|';/* 光标字符 */animation: blink 0.8s steps(1) infinite;margin-left: 2px;
}@keyframes blink {0%,50% {opacity: 1;}50.01%,100% {opacity: 0;}
}JS：
const texts = ['欢迎来到前端学习之旅。', '每天进步一点点！', '每天一个小项目！'];
const typeText = document.getElementById('typeText')let textIndex = 0 // 当前显示的文本索引
let charIndex = 0 // 当前文本中已显示的字符索引
let mode = 'typing' // 状态：typing（打字） 或 deleting（删除）
let timer = null
const pauseTime = 1000 // 打字完成后暂停时间
const intervalTime = 200 // 打字间隔const startTyping = () => {const currentText = texts[textIndex]timer = setInterval(() => {if (mode === 'typing') {typeText.textContent = currentText.slice(0, charIndex + 1)charIndex++if (charIndex === currentText.length) {mode = 'pause'clearInterval(timer)setTimeout(() => {mode = 'deleting'startTyping()}, pauseTime)}} else if (mode === 'deleting') {typeText.textContent = currentText.slice(0, charIndex - 1)charIndex--if (charIndex === 0) {textIndex = (textIndex + 1) % texts.lengthmode = 'typing'clearInterval(timer)startTyping()}}}, intervalTime);
}startTyping()页面效果展示 ：
