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

news2024/11/13 9:21:31

文章目录

- 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.js

yarn 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>
    // 第一个参数是一个选择器，最终就是一个DOM
    var 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>