好的手机网站推荐公司网站宣传

项目简介：

本文介绍如何用原生JavaScript实现一个简洁的打字效果，支持：

• 多段文字循环播放

• 打字完后暂停一会儿

• 逐字删除，形成打字机动画感

• 打字光标闪烁效果

项目适合用于首页欢迎语、提示语等动态文本展示，能提升页面交互体验。

✨核心思路：

1. 文本数组：维护一个文字数组 texts，依次轮播显示。

2. 打字与删除状态：用状态变量控制当前是“打字”还是“删除”。

3. 计时器定时执行：用 setInterval 实现每隔固定时间打出一个字或删去一个字。

4. 暂停控制：文字全部打完后暂停一段时间，再开始删除。

5. 循环播放：删除完毕切换到下一条文字，循环播放。

6. 光标闪烁：用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()

页面效果展示 ：