實現文字打字機效果的方法有多種，核心在于控制文字逐字顯示的速度和順序。1. 使用setinterval和字符串截取：通過定時器逐個字符添加，簡單但可能影響性能；2. 使用requestanimationframe和字符串截?。簞赢嫺鲿掣咝?，適合復雜場景；3. 使用css steps()函數：無需JavaScript，性能好但靈活性差；4. 使用第三方庫如typed.JS：功能強大但需引入依賴。支持刪除和回退可通過修改index值實現；插入html標簽時可用臨時dom元素解析；優化性能可減少dom操作、使用requestanimationframe、減少計算并優先使用css方案。
實現文字打字機效果，核心在于控制文字逐字顯示的速度和順序，營造一種文字像被打印機打印出來一樣的動畫效果。下面介紹幾種實現方式。
解決方案
1. 使用setInterval和字符串截取
這是最基礎的方法，通過setInterval定時器，每次截取字符串的一部分并更新顯示。
const text = "Hello, world! This is a typewriter effect."; const element = document.getElementById("typewriter"); let index = 0; function typeWriter() { if (index < text.length) { element.innerHTML += text.charAt(index); index++; setTimeout(typeWriter, 50); // 調整速度，數值越小越快 } } typeWriter(); // 啟動打字機效果
優點: 簡單易懂，容易上手。 缺點: 依賴setInterval，在某些情況下可能出現性能問題，例如瀏覽器標簽頁被切換到后臺時，定時器可能會被延遲。
2. 使用requestAnimationFrame和字符串截取
requestAnimationFrame比setInterval更適合處理動畫，因為它會根據瀏覽器的刷新率來執行動畫，更加平滑和高效。
const text = "Another typewriter effect using requestAnimationFrame."; const element = document.getElementById("typewriter2"); let index = 0; function typeWriter() { if (index < text.length) { element.innerHTML = text.substring(0, index + 1); index++; requestAnimationFrame(typeWriter); } } typeWriter();
優點: 性能更好，動畫更流暢，能更好地適應不同的瀏覽器環境。 缺點: 稍微復雜一些，需要理解requestAnimationFrame的用法。
3. 使用CSS steps() 函數
純CSS也可以實現打字機效果，利用animation和steps()函數。
<style> #typewriter3 { width: 22ch; /* 設置容器寬度，等于字符數量 */ white-space: nowrap; /* 防止文本換行 */ overflow: hidden; /* 隱藏超出容器的文本 */ border-right: .15em solid orange; /* 添加一個閃爍的光標 */ animation: typing 4s steps(22, end), blink-caret .75s step-end infinite; } @keyframes typing { from { width: 0 } to { width: 22ch } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange; } } </style> <p id="typewriter3">Typewriter effect with CSS</p>
優點: 完全不需要JavaScript，性能極佳，代碼簡潔。 缺點: 靈活性較低，難以實現復雜的動畫效果，例如刪除、暫停等。
4. 使用第三方庫
有一些第三方庫專門用于處理文字動畫，例如Typed.js。
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script> <span id="typed-output"></span> <script> var typed = new Typed('#typed-output', { strings: ['First sentence.', 'Second sentence.'], typeSpeed: 50, }); </script>
優點: 功能強大，可以實現各種復雜的文字動畫效果，使用簡單。 缺點: 需要引入第三方庫，增加了項目的依賴。
如何讓打字機效果支持刪除和回退？
在使用JavaScript實現打字機效果時，可以通過修改typeWriter函數來支持刪除和回退。例如，可以添加一個backspace函數，在滿足特定條件時，減少index的值并更新element.innerHTML。
const text = "Typing and deleting effect."; const element = document.getElementById("typewriter4"); let index = 0; let isDeleting = false; function typeWriter() { if (!isDeleting && index < text.length) { element.innerHTML += text.charAt(index); index++; setTimeout(typeWriter, 50); } else if (isDeleting && index > 0) { element.innerHTML = text.substring(0, index - 1); index--; setTimeout(typeWriter, 50); } else { isDeleting = !isDeleting; setTimeout(typeWriter, 1000); // 暫停一段時間后開始刪除或重新輸入 } } typeWriter();
這段代碼在輸入完成后，會暫停一段時間，然后開始刪除文字，再暫停一段時間后重新輸入。
如何在打字機效果中加入HTML標簽？
直接將HTML標簽插入到字符串中可能會導致顯示問題。一個解決方法是在每次更新element.innerHTML時，先創建一個臨時的DOM元素，將包含HTML標簽的字符串賦值給這個元素的innerHTML，然后再將這個元素的innerHTML賦值給目標元素。
const textWithHTML = "This is <b>bold</b> text with <a href='#'>link</a>."; const element = document.getElementById("typewriter5"); let index = 0; function typeWriter() { if (index < textWithHTML.length) { let tempElement = document.createElement('div'); tempElement.innerHTML = textWithHTML.substring(0, index + 1); element.innerHTML = tempElement.innerHTML; index++; setTimeout(typeWriter, 50); } } typeWriter();
這種方法可以確保HTML標簽被正確解析和顯示。
如何優化打字機效果的性能？
- 避免頻繁操作DOM：盡量減少對element.innerHTML的直接操作，可以先將要顯示的文字拼接成一個字符串，然后一次性更新innerHTML。
- 使用requestAnimationFrame：requestAnimationFrame比setInterval更適合處理動畫，因為它會根據瀏覽器的刷新率來執行動畫，更加平滑和高效。
- 減少不必要的計算：避免在每次更新時都進行復雜的計算，可以將一些計算結果緩存起來，提高性能。
- 使用CSS實現簡單的效果：如果只需要簡單的打字機效果，可以考慮使用CSS來實現，避免使用JavaScript，提高性能。
