当前位置：首页 > wzjs >正文

企业型网站建设费用附近电脑培训班零基础

wzjs 2025/7/20 18:50:43

企业型网站建设费用,附近电脑培训班零基础,灯具网站怎么做,上海知名的网站建设公你当前项目实现了一个非常丝滑的打字机文字效果动画，使用的是自定义的 typical.js 脚本。下面我将给出一份逐步拆解的中文教程，帮你或其他初学者快速上手并自定义这个打字效果。 ✨ 最终效果打开页面后，中央会逐字显示： Hello…

你当前项目实现了一个非常丝滑的 打字机文字效果动画，使用的是自定义的 typical.js 脚本。下面我将给出一份逐步拆解的中文教程，帮你或其他初学者快速上手并自定义这个打字效果。

在这里插入图片描述

✨ 最终效果

打开页面后，中央会逐字显示：

Hello 
Hello world!
Welcome to the typing effect demo.

其中，文字是一个一个打出来的，中间有停顿和替换的动画效果，模拟打字体验。

🧱 第 0 步：项目结构

你的项目由以下文件构成：

typing-effect/
├── index.html       // 页面主结构，绑定 JS 调用
├── typical.js       // 实现核心打字动画的逻辑

🔤 第 1 步：HTML 结构解析（index.html）

<body><div id="output"></div><!-- 引入打字效果脚本 --><script src="./typical.js"></script><script>document.addEventListener('DOMContentLoaded', () => {const node = document.getElementById('output');type(node,'Hello ',1000,'Hello world!',1000,' Welcome to the typing effect demo.');});</script>
</body>

✅ 关键点说明

页面只有一个空的 <div id="output">，用于动态输出文字。
type() 函数接收多个参数：
- 字符串：逐字显示出来；
- 数字：表示等待多少毫秒；
- 你也可以传入函数，实现更复杂逻辑。

⚙️ 第 2 步：typical.js 核心逻辑分析

2.1 主要入口函数：`type(node, ...args)`

async function type(node, ...args) {for (const arg of args) {switch (typeof arg) {case 'string':await edit(node, arg);  // 文字变化动画break;case 'number':await wait(arg);       // 延迟等待break;case 'function':await arg(node, ...args); // 自定义行为break;default:await arg;}}
}

2.2 edit()：逐字比较和更新

async function edit(node, text) {const overlap = getOverlap(node.textContent, text);await perform(node, [...deleter(node.textContent, overlap), ...writer(text, overlap)]);
}

getOverlap：找到当前文本和目标文本的共同部分，避免重复删除。
deleter：从当前文本删到重合部分。
writer：从重合部分写到完整文本。
组合起来就是 “智能替换”。

2.3 perform()：每次逐步更新 `textContent`

async function perform(node, edits, speed = 60) {for (const op of editor(edits)) {op(node); // 每次修改文本await wait(speed + speed * (Math.random() - 0.5)); // 模拟人类打字速度波动}
}

🧪 第 3 步：可定制用法示例

你可以把这段改成你自己的文字，比如：

type(node,'你好，世界！',800,'欢迎来到 Typing.js 的演示。',1500,'😎 你可以无限扩展内容~',1000,'再见～'
);

或者在多个元素中交替：

const title = document.getElementById('title');
const desc = document.getElementById('desc');type(title, '🚀 Typing Animation');
type(desc, 1000, 'This is an elegant way to present words one by one.');

🎁 拓展玩法建议

打字音效
- 每次字符变化时播放「键盘敲击」音效。
循环播放
- 在 type() 外部加入循环函数，形成无限播放文字动画。

配合 CSS 闪烁光标

添加 <span class="cursor">|</span> 伪元素配合动画：

.cursor {display: inline-block;width: 1px;background: white;animation: blink 1s infinite;
}@keyframes blink {0%, 50% { opacity: 1; }51%, 100% { opacity: 0; }
}

✅ 总结

模块	作用
`type()`	接收多个动画步骤（字符串 / 等待 / 函数）
`edit()`	根据目标文字智能删除 & 添加
`writer()`	模拟打字效果
`deleter()`	模拟删除效果
`perform()`	执行每一步并添加速度差