詳解怎麼在前端實現打字機插件

這篇文章為大家帶來了關於前端的相關知識，其中主要跟大家聊一聊前端是怎麼實現打字機插件的，有興趣的朋友下面一起來看一下吧，希望對大家有幫助。

前言

前端實現打字機效果，在網路上找到的透過修改dom節點的方式無法跨端使用，考慮到跨端問題作出相容方案：使用回呼函數，在每次打字變化的時候調用回調並且把更新後的字符串拋出，讓用戶自己去處理之後的渲染，這樣就能夠做到跨平台，在各個端都能夠正常使用。

#最簡單的打字機

const dom = document.querySelector('.content')
const data = '最简单的打字效果代码'.split('')
let index = 0
function writing(index) {
    if (index <p>最簡單的打字機，簡單的透過定時器實現了文字的增加，透過這個例子我們能夠得到一個具體的實現思路，當然一些功能或者性能上的問題還需要不斷地優化，但是我們可以以此作為基礎來設計一款插件。 </p><h2 id="新增向後刪除動效">1. 新增向後刪除動效</h2><p>所以我們新增一個目前的打字狀態</p><p>當state 為"typing" 的時候代表向前打字，相反為向後刪除，</p><p>然後就是處理刪除部分的邏輯，這部分的邏輯和向前新增是一樣的，並且我們也要在刪除到最後一個字元之後把狀態改為"typing" </p><h2 id="新增速度-向後刪除速度可控">2. 新增速度，向後刪除速度可控</h2><p>然後還可以自訂向前新增或向後刪除的速度，透過目前的狀態來判斷就可以</p><h2 id="輸入文字可以為單一字串也可以為字串陣列">3. 輸入文字可以為單一字串也可以為字串陣列</h2><p>並且支援傳入一個字串陣列而不是單一的字串，因為實際的需求可能是多個字串之間一直輪換</p><p>首先單個字符的邏輯沒什麼好說的，字符串的數組的話，就需要添加一個index用於判斷當前打字機進行到了哪一個字符串，</p><p>通過changeTextIndex 這個函數，就可以不斷地更新目前字串，做到字串陣列循環播放的效果</p><h2 id="開啟延遲">#4. 開啟延遲</h2><p>新增字串開始和結束的延遲</p> <p>用於控制每次打字結束之後，需要等待的時間</p><h2 id="停止打字">5. 停止打字</h2><p>打字機運行的過長當中，由於底層是透過定時器實現的，那麼就一定需要在不使用的時候將其關閉，避免造成性能的浪費，比方說在首頁實例化了一個打字機，但是進入到別的頁面的時候就不再需要這個打字機了，那麼就需要將其停下。 </p><p>透過在實例上綁定一個函數來停下當前打字機的進行，當呼叫的時候，會將下一個定時器賦值為 null，從而停下打字機的運行。 </p><h2 id="使用callback-回呼解決小程式問題">6. 使用callback 回呼解決小程式問題</h2><p>上述的程式碼當中，我們都去修改了dom 節點來實現打字機字元的改變，那麼在小程式或其他不存在dom或者是dom 修改的api 不再是innerhtml 的時候，插件就無法進行支持，所以對此進行兼容，顯示通過callBackText 來保存當前的字符串，然後在利用一個函數來決定，這個字符串的使用方式</p><p>在存在callback 的情況下，優先將字串透過callback 回調出去，讓業務拿到這個字串並且自己去處理改變的邏輯，這樣在哪都能夠進行打字效果，並且不在依賴環境。 </p><p>這裡那我自己的uniapp 專案做一個範例</p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/020/a4e713f7104ede389fda47b0c65e7107-1.png?x-oss-process=image/resize,p_40" class="lazy" alt="詳解怎麼在前端實現打字機插件" loading="lazy"></p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/020/924bcf309a473f761e178442d2a375be-2.png?x-oss-process=image/resize,p_40" class="lazy" alt="詳解怎麼在前端實現打字機插件" loading="lazy"></p><p>效果：</p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/020/924bcf309a473f761e178442d2a375be-3.gif?x-oss-process=image/resize,p_40" class="lazy" alt="詳解怎麼在前端實現打字機插件" loading="lazy"> </p><h2 id="第三方typed-js-函式庫">#第三方typed.js 函式庫</h2><p>大部分邏輯具體參考了<a href="https://www.php.cn/link/128250b0e8e7e1ea6558acef9834081a" target="_blank" title="https://mattboldt.github.io/typed.js/docs/" ref="nofollow noopener noreferrer">[typed.js]-JavaScript打字動畫庫</a></p><p>這裡屬於自訂了一個插件，支援的功能不如 typed.js 但是勝在更加輕量級，並且可以自己定義更多自己需要的功能。 </p><h2 id="總結">總結</h2><p>在不考慮環境的情況下，最簡單的打字機效果就是直接利用定時器在每隔一段時間後更新節點內容文字，在其基礎上還可以做出擴展，更新出比較完善的打字機外掛.</p><p>推薦學習：《<a href="https://www.php.cn/course/list/1.html" target="_blank">web前端開發</a>》</p>

以上是詳解怎麼在前端實現打字機插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！