百科.dev
全部条目在线工具AI 编程趋势榜开源项目技术资讯提交条目
登录
< 返回工具列表
T

typewriterjs

> 编程语言
开源

一个简单而强大的原生JavaScript插件,用于实现酷炫的打字机效果。

2.7K stars0 点赞3 次浏览
访问官网GitHub

工具介绍

一个简单而强大的原生JavaScript插件,用于实现酷炫的打字机效果。

TypewriterJS v2

CDN

你可以使用该插件的 CDN 版本,快速轻松完成设置。

xml
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

安装

只需一条命令即可安装 Typewriterjs,然后就可以直接使用了

bash

# with npm
npm i typewriter-effect

# with yarn
yarn add typewriter-effect

构建

你需要先打包 JavaScript 才能使用它,开发时可以使用 npm run build:dev,生产环境则使用 npm run build:prod。

核心

这是打字机效果的基础版本。它需要打包后的 JavaScript 版本才能正常工作。

请参阅 'examples' 文件夹中的示例。

javascript
import Typewriter from 'typewriter-effect/dist/core';

new Typewriter('#typewriter', {
  strings: ['Hello', 'World'],
  autoStart: true,
});

选项

名称 类型 默认值 描述
strings String 或 Array null 使用 autoStart 选项时要打出的字符串
Cursor String 管道字符 用作 Cursor 的字符串值。
delay 'natural' 或 Number 'natural' 打字时每个按键之间的延迟。
deleteSpeed 'natural' 或 Number 'natural' 删除每个字符之间的延迟。
loop Boolean false 是否持续循环。
autoStart Boolean false 是否自动开始打字字符串。您需要提供 strings 选项。
pauseFor Number 1500 在自动启动模式下,打完一个字符串后的暂停时长
devMode Boolean false 是否显示控制台日志。
skipAddStyles Boolean 跳过添加默认打字机 CSS 样式。
wrapperClassName String 'Typewriter__wrapper' 包装元素的类名。
cursorClassName String 'Typewriter__cursor' Cursor 元素的类名。
stringSplitter Function 字符串分割函数,可用于分割表情符号

NPM Repository JSFiddle Example Emoji Example

Issues· 0 开放

查看全部 Issues在 GitHub 打开

暂无开放 Issues,或尚未同步最近议题。

> 标签

JavaScriptjavascriptnative-javascript-plugintypewritertypewriterjs

暂无评论,来聊聊你的看法吧

> 工具信息

发布日期2026年8月1日
最后更新2026年9月17日
分类编程语言
定价开源

> 相关工具

T
TypeScript
JavaScript 的超集,为前端与全栈提供静态类型
P
Python
通用编程语言,广泛用于 Web、数据与 AI
G
Go
Google 推出的简洁高效系统语言