typenet

介绍

实现 web 打字机效果，支持链式调用，使用简单方便

使用

下载

npm

npm i ml-typenet

pnpm

pnpm install ml-typenet

yarn

yarn add ml-typenett

在项目中使用

基本使用

import MLTypenet from "ml-typenet"

new MLTypenet("#app", [options])
  .sleep(300)
  .type("I am a web ", [options])
  .sleep(300)
  .type("typing", { style: "color: red;" })
  .type(" plugin.")
  .start()

options 参数介绍

| property name | type | default value | meaning | | ------------- | ------ | ------------- | ------------------------------------------------------- | | speed | number | 100 | 单位为毫秒，用于控制文本的速度，如打字速度、移动速度等. | | style | string | none | 编写格式与 DOM 元素中的 style 写法保持一致 | | loop | boolean | false | 是否循环重复 | | loopDelay | number | 5000 | 一轮结束后停留多久开始循环下一轮 | | onComplete | Function | - | 完整一轮执行后的回调函数 |

API 介绍

在构造函数(MLTypenet)中配置的options将被视为公共的，若调用API时不传入options那么将使用构造函数中的options. 最后请调用start方法启动整个流程. 目前支持 remove、type、sleep、start、move、line 等方法的链式调用，持续维护...

type

输出文字，type(text: string, [options])

new MLTypenet("#app", [options]).type("i am typenet!").start()

remove

删除文字内容，remove(characters: number, [options])

new MLTypenet("#app", [options])
  .type("i am typenet!")
  .remove(1) // 删除一个字符 最终得到 "i am typenet"
  .start()

move

移动光标所在位置，move(characters: number, [options])，characters可为正数（向右移动）和负数（向左移动）.

new MLTypenet("#app", [options]).type("i am typenet!").move(5).start()

sleep

停止输出文字，sleep(time: number)，参数为毫秒.

new MLTypenet("#app", [options])
  .sleep(2000)
  .type("i am typenet!") // 将等待两秒后输出
  .start()

line

换行，line().

new MLTypenet("#app", [options])
  .sleep(2000)
  .type("i am typenet!") // 将等待两秒后输出
  .line()
  .type("thank you!") // 将换行继续输出此输出
  .start()

how to get this

获取实例对象，getThis().

let instance = null;
new MLTypenet("#app", [options])
  .getThis((theThis) => {
    // 获取实例对象
    instance = theThis;
  })
  .sleep(2000)
  .type("i am typenet!") // 将等待两秒后输出
  .line()
  .type("thank you!") // 将换行继续输出此输出
  .start()

常见问题

todo...

参与贡献

License

MIT © coderlei