使用JS模拟键盘打字效果？在浏览网页的时候也经常能看到这种效果。本文将介绍如何实现：打字效果的文字特效，文字一个一个地打印在页面上。
原生Js实现
html和样式：
<style>
#content p {
color: #666;
text-indent: 20px;
font-size: 14px;
line-height: 28px;
letter-spacing: 1px;
}
</style>
<div id="contents"></div>js代码（定时器）
<script>
function start(content,str) {
let str_='';
let i=0;
let timer = setInterval(() => {
if (str_.length < str.length) {
str_ += str[i++]
content.innerHTML = '<p>' + str_ + '_</p>'
} else {
clearInterval(timer)
content.innerHTML = '<p>' + str_ + '</p>'
}
}, 100)
}
start(document.getElementById('contents'),'fly63前端网分享前沿的Web开发技术,教程,框架/库,资源和在线工具;是面向前端开发人员和从事互联网工作者的学习交流平台;为大家解决一些基本的、常见的问题,并提供各类技术解决方案。')
</script>当然我们也可以使用settimeout+递归的写法来实现。
第三方插件
推荐一款轻量级插件:easy-typer-js，兼容原生JS和MVVM类框架（Vue, React...）。用于实现页面文字的打字机效果，它使用起来非常简单，只需要几行代码就能实现高大上的打字机效果。
优点
与其他相似的打字机插件我们的有点在哪里？
- 我们的打字机不操作DOM，重要的事情讲三遍，不操作DOM！不操作DOM！不操作DOM！
- 我们的打字机与MVVM框架结合性能超棒！
- 我们的打字机只改变数据对象的输出，并不对DOM进行操作！
地址
github地址：https://github.com/pengqiangsheng/easy-typer-js
CDN地址：https://cdn.jsdelivr.net/npm/easy-typer-js@1.0.1/easyTyper.min.js
安装
npm install easy-typer-js --save
或者
yarn add easy-typer-js使用
// 引入
import EasyTyper from 'easy-typer-js'
// 实例化
const typed = new EasyTyper(obj, input, fn, hooks)参数
| 参数 | 说明 | 回调 | 是否必须 |
|---|---|---|---|
| obj | 配置对象 | 无 | 必须一定有且格式要对，十分严格 |
| input | 内容输入 | 无 | 可以没有，会有小彩蛋 |
| fn | 完成一次output输出后的回调函数 | 当前easy-typer-js实例instance | 否 |
| hooks | 钩子 钩在每一帧将要完成的时间片段上 | 当前帧输出的内容、当前easy-typer-js实例instance | 否 |
回调函数与钩子函数使用方法在上面都使用到了哦
obj配置
| 参数(params) | 含义(meaning) | 类型(type) |
|---|---|---|
| output | 输出内容,使用MVVM框架时直接使用 { obj.output } | string |
| type | 下一次的行为 'rollback', 'normal', 'custom' | string(有且仅有此三种) |
| isEnd | 全局控制是否终止 | boolean |
| speed | 打字速度 | number |
| backSpeed | 回滚速度 | number |
| sleep | 完整输出完一句话后，睡眠一定时间后触发回滚事件 | number |
| singleBack | 单次的回滚（优先级高于type） | boolean |
| sentencePause | 整个生命周期运行完毕后，句子是否暂停显示（仅在回滚模式下生效） | boolean |
obj配置对象校验非常严格，对象的字段和类型都要遵从以上格式，否则你会在控制台看到一个非常显眼的error！
暴露出可直接调用方法
| 方法名 | 说明 | 参数 |
|---|---|---|
| play | 开始打字 | 无 |
| close | 停止打字 | 无 |
| sleep | 单独可以调用睡眠线程，可以使用在任何地方 | ms(毫秒) |
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！