实现动态打字机效果
打字机效果是一种常见的网页动态文本展示方式，它能模拟文字逐个字符打出的过程，并常伴随一个闪烁的光标，为用户界面增添趣味性和专业感。本教程将引导您使用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免费学习笔记（深入）”；
YothSHOP是优斯科技鼎力打造的一款asp开源商城系统，支持access和Sql server切换，完善的会员订单管理，全站生成静态html文件，SEO优化效果极佳，后台XP模式和普通模式随意切换，极易操作，欢迎使用！ Asp开源商城系统YothSHOP功能介绍：1.使用静态页和程序页分离技术，网站可自由开启和关闭，实现全站生成静态页，可动静态切换，方便二次开发和后期维护。2.管理员管理：后台
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)函数：
-
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的结合，您便能轻松地在网页上实现一个动态且富有吸引力的打字机效果。这种技术不仅提升了用户体验，也为信息展示提供了更具创意的方式。
