要实现js打字机效果，核心在于控制文本逐字显示的速度和方式。方法包括：1. 使用setinterval + substring，通过定时截取字符更新显示内容，简单但控制力弱；2. requestanimationframe + 递归，利用浏览器重绘机制提升动画流畅度；3. promise + async/await，适用于异步场景，代码更清晰易维护；4. css animation + js控制，性能最佳但灵活性差。暂停与恢复可通过清除或重启定时器、标志位控制实现。支持html标签可通过解析字符串分别处理标签和文本节点。删除效果则通过切换打字与回退状态实现，从末尾逐字删除并循环执行。
要实现JS打字机效果，核心在于控制文本逐字显示的速度和方式，模拟人工打字的过程。
解决方案
以下是四种实现JS打字机效果的方法，各有侧重：
setInterval + substring： 这是最基础的方法。使用setInterval定时器，每次从完整文本中截取一个字符，更新显示文本。
const text = "Hello, world! This is a typewriter effect.";const element = document.getElementById("typewriter");let index = 0;function typeWriter() { if (index < text.length) { element.innerHTML = text.substring(0, index + 1); index++; setTimeout(typeWriter, 50); // 调整速度 }}typeWriter();
这种方式简单直接，但对复杂场景控制力稍弱，例如暂停、回退等。
requestAnimationFrame + 递归： 使用requestAnimationFrame可以获得更平滑的动画效果，避免setInterval可能出现的丢帧问题。 递归调用自身，直到文本全部显示完毕。
const text = "Another example with requestAnimationFrame.";const element = document.getElementById("typewriter2");let index = 0;function typeWriterRAF() { if (index { setTimeout(typeWriterRAF, 50); // 保持速度一致 }); }}typeWriterRAF();
requestAnimationFrame 会在浏览器下一次重绘之前执行，性能更好。
Promise + async/await： 这种方式更适合处理异步数据或需要串行执行的打字效果。例如，从服务器获取文本后，再进行打字动画。
const text = "Typing with async/await and Promises.";const element = document.getElementById("typewriter3");let index = 0;function typeCharacter(char) { return new Promise(resolve => { setTimeout(() => { element.innerHTML += char; resolve(); }, 50); });}async function typeWriterAsync() { for (let i = 0; i < text.length; i++) { await typeCharacter(text[i]); }}typeWriterAsync();
async/await 使得异步代码更易读，更易于维护。
CSS animation + JavaScript控制： 将打字效果的字符显示隐藏交给CSS动画控制，JS负责添加和移除字符。
#typewriter4 { width: 0; overflow: hidden; white-space: nowrap; animation: typing 5s steps(40, end); /* 40 是文本长度 */}@keyframes typing { from { width: 0 } to { width: 100% }}CSS Animation Typewriter Effect.
这种方式性能最好，动画效果也更流畅，但灵活性稍差。需要提前知道文本长度，并设置合适的steps。
如何实现打字机效果的暂停和恢复？
对于setInterval和requestAnimationFrame方法，可以通过清除定时器或取消动画帧来实现暂停。 恢复时，重新启动定时器或动画循环。
// 以 setInterval 为例let intervalId;function startTypeWriter() { intervalId = setInterval(typeWriter, 50);}function stopTypeWriter() { clearInterval(intervalId);}// 调用 startTypeWriter() 启动， stopTypeWriter() 暂停
对于async/await，可以通过设置一个标志位来控制循环的执行。
let isPaused = false;async function typeWriterAsync() { for (let i = 0; i setTimeout(resolve, 100)); // 等待恢复 } await typeCharacter(text[i]); }}function pauseTypeWriter() { isPaused = true;}function resumeTypeWriter() { isPaused = false;}
如何让打字机效果支持HTML标签？
直接使用innerHTML插入带HTML标签的字符串可能会导致标签被转义。 一种解决方案是，将HTML标签也作为字符处理，逐个添加到元素中。
另一种更复杂的方法是，解析HTML字符串，将文本节点和HTML元素分别处理。文本节点使用打字机效果，HTML元素直接插入。 这需要一个简单的HTML解析器。
// 简化示例，仅处理简单的标签function typeWriterWithHTML(htmlString, element) { let currentIndex = 0; function typeNext() { if (currentIndex < htmlString.length) { const char = htmlString[currentIndex]; if (char === '<') { // 假设只处理 标签 if (htmlString.substring(currentIndex, currentIndex + 3) === '') { element.innerHTML += ''; currentIndex += 3; } else if (htmlString.substring(currentIndex, currentIndex + 4) === '') { element.innerHTML += ''; currentIndex += 4; } else { element.innerHTML += char; // 其他标签直接输出 currentIndex++; } } else { element.innerHTML += char; currentIndex++; } setTimeout(typeNext, 50); } } typeNext();}const htmlText = "This is bold text with typewriter effect.";const element = document.getElementById("typewriter5");typeWriterWithHTML(htmlText, element);
如何实现删除效果（回退）？
在打字机效果的基础上，增加一个删除字符的逻辑。可以设置一个标志位，用于切换打字和删除状态。
let isDeleting = false;let index = text.length; // 从文本末尾开始删除function typeWriter() { if (isDeleting) { index--; element.innerHTML = text.substring(0, index); } else { index++; element.innerHTML = text.substring(0, index); } if (index === text.length + 1) { isDeleting = true; // 开始删除 } if (index === 0) { isDeleting = false; // 停止删除，重新开始打字 } setTimeout(typeWriter, 50);}
这种方式可以实现一个循环的打字和删除效果。
以上就是js怎样实现打字机效果 js打字机动画的4种实现方式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1507112.html
微信扫一扫 
支付宝扫一扫 
