本文详细介绍了如何利用HTML、CSS和JavaScript创建引人入胜的动态打字机效果。通过结构化的HTML元素、CSS动画实现光标闪烁，以及JavaScript控制字符逐个显示和文本循环播放，读者将学会如何为网页添加一个专业且富有交互性的文本展示功能，并掌握其核心实现原理和自定义方法。
实现动态打字机效果
打字机效果是一种常见的网页动态文本展示方式，它能模拟文字逐个字符打出的过程，并常伴随一个闪烁的光标，为用户界面增添趣味性和专业感。本教程将引导您使用html、css和javascript，从零开始构建一个功能完善的打字机效果。
1. HTML结构：定义文本容器
首先，我们需要一个HTML元素来承载将要动态显示的文本。为了确保JavaScript能精确地控制这个元素，建议为其分配一个唯一的ID。
在这个例子中，我们使用了一个h1标签，并为其指定了id=”typewriter-text”。在实际应用中，您可以根据需要选择任何块级元素（如div、p等）。
2. CSS样式：创建闪烁光标
打字机效果通常包含一个模拟文本输入光标的元素。这个光标可以通过CSS的边框和动画来实现。我们将在JavaScript中动态地将一个元素插入到文本末尾作为光标。
span.typewriter-cursor { border-right: .05em solid; /* 光标样式，一个细边框 */ animation: caret 1s steps(1) infinite; /* 定义闪烁动画 */}@keyframes caret { 50% { border-color: transparent; /* 动画50%时边框透明，实现闪烁 */ }}
这里，我们定义了一个名为typewriter-cursor的span类，为其设置了右边框作为光标，并通过@keyframes caret动画使其每秒闪烁一次。steps(1)确保了动画是阶梯式的，即瞬间切换，而不是平滑过渡，更符合光标闪烁的视觉效果。
立即学习“Java免费学习笔记（深入）”；
3. JavaScript逻辑：驱动打字动画
JavaScript是实现打字机效果的核心。它负责控制文本的逐字显示、光标的插入、文本数组的循环以及动画的节奏。
document.addEventListener('DOMContentLoaded', function() { // 要循环显示的文本数组 const dataText = [ "VISIBILITÀ.", "NUOVI INGAGGI.", "NUOVI FAN.", "PIÙ VISIBILITÀ!", "SUCCESSO!" ]; const targetElement = document.getElementById("typewriter-text"); // 获取目标H1元素 const typingSpeed = 90; // 每个字符打出的间隔时间（毫秒） const textDisplayDelay = 2000; // 每个文本显示完毕后的停留时间（毫秒） const loopRestartDelay = 20000; // 所有文本循环完毕后重新开始的延迟（毫秒） /** * 逐字显示文本的函数 * @param {string} text - 当前要显示的文本 * @param {number} charIndex - 当前正在显示的字符索引 * @param {function} fnCallback - 文本显示完毕后要执行的回调函数 */ function typeWriter(text, charIndex, fnCallback) { // 检查文本是否已全部显示 if (charIndex < text.length) { // 将当前字符添加到目标元素，并插入光标span targetElement.innerHTML = text.substring(0, charIndex + 1) + ''; // 延迟后递归调用自身，显示下一个字符 setTimeout(function() { typeWriter(text, charIndex + 1, fnCallback); }, typingSpeed); } else if (typeof fnCallback === 'function') { // 文本显示完毕，延迟后调用回调函数 setTimeout(fnCallback, textDisplayDelay); } } /** * 启动文本动画循环的函数 * @param {number} textIndex - dataText数组中当前要显示的文本索引 */ function StartTextAnimation(textIndex) { // 如果当前文本索引超出数组范围，表示所有文本已显示完毕，等待一段时间后从头开始 if (typeof dataText[textIndex] === 'undefined') { setTimeout(function() { StartTextAnimation(0); // 从第一个文本重新开始 }, loopRestartDelay); return; // 提前返回，避免后续执行 } // 检查当前文本是否存在（防止空字符串或undefined） if (textIndex < dataText.length) { // 启动当前文本的打字机动画 typeWriter(dataText[textIndex], 0, function() { // 当前文本动画完成后，启动下一个文本的动画 StartTextAnimation(textIndex + 1); }); } } // 页面加载完成后，启动第一个文本的动画 StartTextAnimation(0);});
代码解析与注意事项：
DOMContentLoaded事件监听器：确保所有HTML内容加载完毕后再执行JavaScript代码，避免因元素未加载而导致的错误。
dataText数组：存储所有需要循环显示的文本字符串。您可以根据需要修改或扩展这个数组。
targetElement：使用document.getElementById(“typewriter-text”)精确地获取到要显示文本的HTML元素。这是解决原始问题中“计算所有h1”的关键，通过ID定位可以避免影响页面上其他同类型元素。
typeWriter(text, charIndex, fnCallback)函数：
这是一个递归函数，负责逐个字符地将text显示到targetElement中。text.substring(0, charIndex + 1)用于截取当前已打出的字符。：在每次更新文本时，我们都会在已打出的文本后面添加这个光标span。aria-hidden=”true”属性告知辅助技术（如屏幕阅读器）忽略此元素，因为它纯粹是视觉效果，不提供语义信息。setTimeout：控制每个字符之间的时间间隔（typingSpeed），模拟打字机的速度。fnCallback：当整个文本显示完毕后，会调用这个回调函数，通常用于触发下一个文本的显示。
StartTextAnimation(textIndex)函数：
负责管理dataText数组中文本的循环显示。它会检查dataText[textIndex]是否存在。如果当前textIndex超出了dataText数组的范围，意味着所有文本都已显示一遍，它会等待loopRestartDelay时间后，通过StartTextAnimation(0)重新开始整个循环。如果当前文本存在，它会调用typeWriter函数来显示该文本，并在typeWriter完成后，递归调用StartTextAnimation(textIndex + 1)来处理下一个文本。
关键自定义点：
文本内容： 修改dataText数组以改变显示的文本内容。打字速度： 调整typingSpeed变量（毫秒）来加快或减慢字符显示速度。文本停留时间： 调整textDisplayDelay变量（毫秒）来控制每个文本显示完毕后等待下一个文本开始的时间。循环重启延迟： 调整loopRestartDelay变量（毫秒）来控制所有文本播放完毕后，重新开始循环的等待时间。光标样式： 修改CSS中.typewriter-cursor的样式，例如改变颜色、大小或动画速度。目标元素： 如果您想在其他元素上实现此效果，只需修改HTML中的id和JavaScript中的targetElement变量。
通过上述HTML、CSS和JavaScript的结合，您便能轻松地在网页上实现一个动态且富有吸引力的打字机效果。这种技术不仅提升了用户体验，也为信息展示提供了更具创意的方式。
以上就是使用HTML、CSS和JavaScript实现动态打字机效果教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525466.html
微信扫一扫 
支付宝扫一扫 
