如何在web前端里实现打字机插件

这篇文章主要介绍了如何在web前端里实现打字机插件的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何在web前端里实现打字机插件文章都会有所收获，下面我们一起来看看吧。

最简单的打字机

const dom = document.querySelector('.content')
const data = '最简单的打字效果代码'.split('')
let index = 0
function writing(index) {
    if (index < data.length) {
        dom.innerHTML += data[index]
        setTimeout(writing.bind(this), 200, ++index)
    }
}
writing(index)

最简单的打字机，简单的通过定时器实现了文字的增加，通过这个例子我们能够得到一个具体的实现思路，当然一些功能或者性能上的问题还需要不断地优化，但是我们可以以此作为基础来设计一款插件。

1. 新增向后删除动效

所以我们新增一个当前的打字状态

当 state 为 "typing" 的时候代表向前打字，相反为向后删除，

然后就是处理删除部分的逻辑，这部分的逻辑和向前新增是一样的，并且我们也要在删除到最后一个字符之后把状态改为 "typing"

2. 新增速度，向后删除速度可控

然后还可以自定义向前新增或者向后删除的速度，通过当前的状态来判断就可以

3. 输入文字可以为单个字符串也可以为字符串数组

并且支持传入一个字符串数组而不是单个的字符串，因为实际的需求可能是多个字符串之间一直轮换

首先单个字符的逻辑没什么好说的，字符串的数组的话，就需要新增一个index用于判断当前打字机进行到了哪一个字符串，

通过 changeTextIndex 这个函数，就可以不断地更新当前字符串，做到字符串数组循环播放的效果

4. 开启延迟

新增字符串开始和结束的延迟

用于控制每次打字结束之后，需要等待的时间

5. 停止打字

打字机运行的过长当中，由于底层是通过定时器实现的，那么就一定需要在不使用的时候将其关闭，避免造成性能的浪费，比方说在首页实例化了一个打字机，但是进入到别的页面的时候就不再需要这个打字机了，那么就需要将其停下。

通过在实例上绑定一个函数来停下当前打字机的进行，当调用的时候，会将下一个定时器赋值为 null，从而停下打字机的运行。

6. 使用 callback 回调解决小程序问题

上述的代码当中，我们都去修改了 dom 节点来实现打字机字符的改变，那么在小程序或者是其他不存在 dom 或者是 dom 修改的 api 不再是 innerhtml 的时候，插件就无法进行支持，所以对此进行兼容，显示通过 callBackText 来保存当前的字符串，然后在利用一个函数来决定，这个字符串的使用方式

在存在 callback 的情况下，优先将字符串通过 callback 回调出去，让业务拿到这个字符串并且自己去处理改变的逻辑，这样在哪都能够进行打字效果，并且不在依赖环境。

这里那我自己的 uniapp 项目做一个示例

效果：

关于“如何在web前端里实现打字机插件”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“如何在web前端里实现打字机插件”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。