typewriter.ts 是一个 TypeScript 库，可以让您在页面中模拟打字效果。它非常易于使用，因此即使没有 TypeScript 或 JavaScript 经验的新手也可以轻松使用。
安装
要安装 typewriter.ts，请使用 npm：
--- ------- -------------
使用
在您的 TypeScript 文件中，import typewriter.ts库：
------ ---------- ---- ----------------
接下来，您需要列出要模拟它的文本，并将其作为字符串传递给 Typewriter 的构造函数。请注意，该构造函数需要一个 DOM 元素，它将作为 typewriter 编写文本的位置。
----- ------- - ----------------------------- ----- ---------- - --- ------------------- - ------ --- --- ----------------------------- -------- ---------
这将在您的 H1 标题中模拟打字效果。我们可以为 typewriter 定义不同的选项，例如：
----- ---------- - --- ------------------- - ------ ---- ------------- ------- ---- ------ ----- ----- -------- ------------ -- --------- ---
示例
以下示例演示了如何使用 typewriter.ts 在页面中创建打字效果。让我们将HTML标记添加到一个页面：
--- -------------------------------
接下来，我们要使用 typewriter.ts 在 H1 标题中创建打字效果。这是一个例子。
------ ---------- ---- ---------------- ----- --------- - ------------------------------------------------ ----- ---------- - --- --------------------- - ------ ---- ------- ---- ----- ----- ------------ -- --- ---------- --------------------- --------------- ------------ -------------------------- --------------- --------------- ------------------ ---------
这个例子首先向原来的华一标签中的内容添加了“你好，世界！”，然后暂停了一秒钟，并删除了所有文本。1000 毫秒后，它会打印 “我是一个前端开发人员。” 但是在打印 "人员" 之前，它会暂停并删除 "开发"。最后，loop=true 会让它循环播放。
结论
在这篇文章中，我们学习了如何使用 typewriter.ts 在您的网页中创建打字效果。这些效果可以为您的网站或博客带来个性和创意元素，并吸引用户的注意力。通过了解 Typewriter 的选项和使用方式，您可以创建自己的打字效果，并找到更好的方法来吸引您的用户。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562e281e8991b448e06d4