如何在web前端里實現(xiàn)打字機插件

這篇文章主要介紹了如何在web前端里實現(xiàn)打字機插件的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇如何在web前端里實現(xiàn)打字機插件文章都會有所收獲，下面我們一起來看看吧。

最簡單的打字機

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)

最簡單的打字機，簡單的通過定時器實現(xiàn)了文字的增加，通過這個例子我們能夠得到一個具體的實現(xiàn)思路，當(dāng)然一些功能或者性能上的問題還需要不斷地優(yōu)化，但是我們可以以此作為基礎(chǔ)來設(shè)計一款插件。

1. 新增向后刪除動效

所以我們新增一個當(dāng)前的打字狀態(tài)

當(dāng) state 為 "typing" 的時候代表向前打字，相反為向后刪除，

然后就是處理刪除部分的邏輯，這部分的邏輯和向前新增是一樣的，并且我們也要在刪除到最后一個字符之后把狀態(tài)改為 "typing"

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

然后還可以自定義向前新增或者向后刪除的速度，通過當(dāng)前的狀態(tài)來判斷就可以

3. 輸入文字可以為單個字符串也可以為字符串?dāng)?shù)組

并且支持傳入一個字符串?dāng)?shù)組而不是單個的字符串，因為實際的需求可能是多個字符串之間一直輪換

首先單個字符的邏輯沒什么好說的，字符串的數(shù)組的話，就需要新增一個index用于判斷當(dāng)前打字機進行到了哪一個字符串，

通過 changeTextIndex 這個函數(shù)，就可以不斷地更新當(dāng)前字符串，做到字符串?dāng)?shù)組循環(huán)播放的效果

4. 開啟延遲

新增字符串開始和結(jié)束的延遲

用于控制每次打字結(jié)束之后，需要等待的時間

5. 停止打字

打字機運行的過長當(dāng)中，由于底層是通過定時器實現(xiàn)的，那么就一定需要在不使用的時候?qū)⑵潢P(guān)閉，避免造成性能的浪費，比方說在首頁實例化了一個打字機，但是進入到別的頁面的時候就不再需要這個打字機了，那么就需要將其停下。

通過在實例上綁定一個函數(shù)來停下當(dāng)前打字機的進行，當(dāng)調(diào)用的時候，會將下一個定時器賦值為 null，從而停下打字機的運行。

6. 使用 callback 回調(diào)解決小程序問題

上述的代碼當(dāng)中，我們都去修改了 dom 節(jié)點來實現(xiàn)打字機字符的改變，那么在小程序或者是其他不存在 dom 或者是 dom 修改的 api 不再是 innerhtml 的時候，插件就無法進行支持，所以對此進行兼容，顯示通過 callBackText 來保存當(dāng)前的字符串，然后在利用一個函數(shù)來決定，這個字符串的使用方式

在存在 callback 的情況下，優(yōu)先將字符串通過 callback 回調(diào)出去，讓業(yè)務(wù)拿到這個字符串并且自己去處理改變的邏輯，這樣在哪都能夠進行打字效果，并且不在依賴環(huán)境。

這里那我自己的 uniapp 項目做一個示例

效果：

關(guān)于“如何在web前端里實現(xiàn)打字機插件”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“如何在web前端里實現(xiàn)打字機插件”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。