1. 打字机效果概述
打字机效果是一种常见的网页动态文本展示方式，它通过模拟打字机逐字输出文本的过程，为用户带来独特的视觉体验。这种效果常用于网站标题、口号或关键信息展示，能够有效吸引用户的注意力。本教程将引导您使用纯前端技术（html、css 和 javascript）构建一个功能完善、可定制的打字机效果。
2. HTML 结构：定义文本容器
首先，我们需要在 HTML 中定义一个元素来承载动态生成的文本。为了精确控制和避免影响页面上其他同类型元素，强烈建议为该元素指定一个唯一的 id。
在这个示例中，我们使用了一个
标签，并为其指定了 id="typewriter-text"。JavaScript 将通过这个 id 来定位并操作该元素的内容。3. CSS 样式：实现光标和动画
打字机效果通常伴随着一个闪烁的光标。我们将利用一个 元素来模拟光标，并通过 CSS 动画使其周期性地闪烁。
/* 光标样式 */
#typewriter-text span {
border-right: .05em solid; /* 模拟光标 */
animation: caret 1s steps(1) infinite; /* 应用闪烁动画 */
}
/* 光标闪烁动画 */
@keyframes caret {
50% {
border-color: transparent; /* 在动画中点时隐藏光标 */
}
}- border-right: .05em solid;: 为 元素添加一个右边框，模拟打字机光标的竖线。.05em 提供了一个合适的宽度。
-
animation: caret 1s steps(1) infinite;: 将名为 caret 的动画应用到 元素上。
- 1s: 动画持续时间为 1 秒。
- steps(1): 动画在 1 秒内只执行 1 步，这使得边框颜色在显示和透明之间瞬间切换，产生硬闪烁效果。
- infinite: 动画无限循环。
-
@keyframes caret: 定义了名为 caret 的关键帧动画。
- 50%: 在动画进行到 50% 的时候，将 border-color 设置为 transparent，使光标消失。在动画的其余时间（0%到50%和50%到100%），光标会显示。
4. JavaScript 逻辑：驱动打字动画
JavaScript 是实现打字机效果的核心。它负责逐字输出文本、控制速度、切换不同的文本内容，并确保动画的流畅性。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
立即学习“Java免费学习笔记（深入）”；
document.addEventListener('DOMContentLoaded', function() {
// 定义要进行打字动画的文本数组
var dataText = ["VISIBILITÀ.", "NUOVI INGAGGI.", "NUOVI FAN.", "PIÙ VISIBILITÀ!", "SUCCESSO!"];
// 获取承载文本的元素
var targetElement = document.getElementById('typewriter-text');
/**
* 逐字打印文本的函数
* @param {string} text 当前要打印的完整文本
* @param {number} i 当前打印到的字符索引
* @param {function} fnCallback 当文本打印完成后调用的回调函数
*/
function typeWriter(text, i, fnCallback) {
// 检查文本是否打印完成
if (i < text.length) {
// 更新目标元素的innerHTML，添加当前字符并保留光标
targetElement.innerHTML = text.substring(0, i + 1) + '';
// 设置延时，然后递归调用自身打印下一个字符
setTimeout(function() {
typeWriter(text, i + 1, fnCallback);
}, 90); // 90毫秒的打字速度
} else if (typeof fnCallback === 'function') {
// 文本打印完成，延时后调用回调函数
setTimeout(fnCallback, 2000); // 文本显示2秒后调用回调
}
}
/**
* 启动文本动画序列的函数
* @param {number} i 当前要显示的文本在dataText数组中的索引
*/
function StartTextAnimation(i) {
// 检查当前索引的文本是否存在
if (typeof dataText[i] === 'undefined') {
// 如果所有文本都已显示，则在较长时间后从头开始循环
setTimeout(function() {
StartTextAnimation(0);
}, 20000); // 所有文本循环完后等待20秒再重新开始
} else {
// 如果文本存在，则启动打字动画
typeWriter(dataText[i], 0, function() {
// 当前文本打字动画完成后，启动下一个文本的动画
StartTextAnimation(i + 1);
});
}
}
// 页面加载完成后，启动第一个文本的动画
StartTextAnimation(0);
});JavaScript 关键点解析：
- document.addEventListener('DOMContentLoaded', ...): 确保在 DOM 完全加载和解析后才执行 JavaScript 代码，防止在元素尚未存在时尝试操作它们。
- dataText: 这是一个字符串数组，包含了所有需要通过打字机效果展示的文本内容。您可以根据需求修改或扩展此数组。
-
targetElement = document.getElementById('typewriter-text'): 这是获取 HTML 中我们定义的
元素的关键。使用 id 能够确保我们只操作这个特定的元素，避免影响页面上其他
标签。
-
typeWriter(text, i, fnCallback) 函数:
- text: 当前正在进行打字动画的完整字符串。
- i: 当前已打印字符的索引。
- fnCallback: 当 text 完全打印完成后，将执行的回调函数。
- text.substring(0, i + 1): 每次调用时，都会截取 text 的一部分，从开头到当前索引 i 处，实现逐字增加的效果。
- + '': 在当前文本后面追加一个 元素，作为闪烁的光标。aria-hidden="true" 属性是为了提高可访问性，告知屏幕阅读器该元素是装饰性的，不应被朗读。
- setTimeout(..., 90): 控制打字速度。每隔 90 毫秒，typeWriter 函数会再次调用自身，打印下一个字符。
- else if (typeof fnCallback === 'function'): 当一个文本完全打印完成后，会等待 2000 毫秒（2秒），然后调用 fnCallback，通常用于启动下一个文本的动画。
-
StartTextAnimation(i) 函数:
- i: dataText 数组中当前要处理的文本的索引。
- if (typeof dataText[i] === 'undefined'): 检查是否所有文本都已显示完毕。如果是，则在 20 秒后重新从 dataText 数组的第一个文本开始循环。
- typeWriter(dataText[i], 0, function() { ... }): 调用 typeWriter 函数来显示 dataText 数组中的当前文本。当 typeWriter 完成时，其回调函数会调用 StartTextAnimation(i + 1) 来启动下一个文本的动画。
5. 完整代码示例
将上述 HTML、CSS 和 JavaScript 代码整合到您的项目中，即可实现打字机效果。
打字机效果演示
6. 注意事项与优化
- 性能考量: 对于非常长的文本或大量同时进行的打字机效果，频繁操作 innerHTML 可能会有轻微的性能开销。在大多数情况下，对于少量文本，这种方法是完全可接受的。
- 可访问性: aria-hidden="true" 属性确保了屏幕阅读器不会朗读闪烁的光标，提高了可访问性。
-
定制化:
- 打字速度: 调整 typeWriter 函数中的 setTimeout 延迟时间（例如 90 毫秒）来改变打字速度。
- 文本显示时间: 调整 typeWriter 函数中调用 fnCallback 前的 setTimeout 延迟时间（例如 2000 毫秒）来改变每个文本显示的时长。
- 循环间隔: 调整 StartTextAnimation 函数中 StartTextAnimation(0) 前的 setTimeout 延迟时间（例如 20000 毫秒）来改变所有文本循环完后重新开始的间隔。
- 光标样式: 修改 CSS 中 span 的 border-right 属性可以改变光标的颜色、粗细。
- 文本内容: 随时修改 dataText 数组中的字符串，以适应您的内容需求。
- 多个打字机效果: 如果您需要在同一个页面上实现多个独立的打字机效果，可以考虑将 JavaScript 逻辑封装成一个可复用的函数或类，并通过传入不同的 id 或元素引用来初始化它们。
7. 总结
通过本教程，您已经掌握了如何利用 HTML 定义结构、CSS 实现光标动画以及 JavaScript 驱动文本逐字显示和循环的关键技术。这种打字机效果不仅能提升网站的视觉吸引力，还能有效传达信息，为用户带来更具互动性的浏览体验。您可以根据自己的需求调整代码中的参数，创建出独一无二的动态文本效果。
