怎样在web前端里实现打字机插件

发布时间：2023-08-03 10:51:06 所属栏目：教程来源：转载

导读： 　　这篇文章主要介绍了如何在web前端里实现打字机插件的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何在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 回调出去，让业务拿到这个字符串并且自己去处理改变的逻辑，这样在哪都能够进行打字效果，并且不在依赖环境。

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!