使用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+递归的写法来实现。

第三方插件

优点

与其他相似的打字机插件我们的有点在哪里？

• 我们的打字机不操作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配置

obj配置对象校验非常严格，对象的字段和类型都要遵从以上格式，否则你会在控制台看到一个非常显眼的error！

暴露出可直接调用方法

链接: https://fly63.com/article/detial/12292