【日常记录】【插件】Typed.js：用于创建打字效果的 JavaScript 库

文章目录

- 1. 引言
- 2. 安装
- 3. 基本使用
- 参考链接

1. 引言

Typed.js是一个用于创建打字效果的 JavaScript 库。这个效果就是 chatgpt、百度的文心一言等其他的大模型，回复用户的问题的时候的效果

typed-js 官网
typed 案例

在这里插入图片描述

2. 安装

CDN方式

这俩都可以，还有其他的cdn 服务厂商，不止这俩

<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/typed.js/2.1.0/typed.umd.js"></script>

与vite等其他构建工具一块使用

npm install typed.jsyarn add typed.js

import Typed from 'typed.js';const typed = new Typed('#element', {strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],typeSpeed: 50,
});

3. 基本使用

在这里插入图片描述

这俩只演示了，这四个按钮，还有一些其他的操作，在官网上都有，可以自行查看api文档

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/typed.js/2.1.0/typed.umd.js"></script>
</head><body><button id="start">开始</button><button id="stop">停止</button><button id="reset">重置</button><button id="destroy">销毁</button><span class="element"></span><script>// 第一个参数是一个选择器，最终就是一个DOMvar typed = new Typed(".element", {strings: ["Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius, nihil culpa eaque molestiae, illo esse et nulla sint non voluptatibus illum qui? Labore dolorum optio magni ipsa quis rem omnis!",],typeSpeed: 30, // 速度，单位毫秒cursorChar: "$", // 自定义占位符onBegin: (self) => {// 开始之前console.log("运行开始之前~~~~~~");},onComplete: (self) => {// 结束之后console.log("运行结束之后~~~~~~");},onReset: (self) => {console.log('重置');console.log("onReset ", self);},onStop: (pos, self) => {console.log('停止');console.log("onStop ", pos, self);},onStart: (pos, self) => {console.log('开始');console.log("onStart ", pos, self);},onDestroy: (self) => {console.log('销毁');console.log("onDestroy ", self);},});document.getElementById("start").onclick = function () {typed.start();};document.getElementById("stop").onclick = function () {typed.stop();};document.getElementById("reset").onclick = function () {typed.reset();};document.getElementById("destroy").onclick = function () {typed.destroy();};</script>
</body></html>