当前位置：首页 > news >正文

练习小项目9：打字效果文字展示（多段文字循环+删除+光标闪烁）

news 来源：原创 2025/5/31 12:40:06

项目简介：

本文介绍如何用原生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()