JavaScript 打字機退格效果

Question

我從 w3s https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_typewriter得到了這個代碼，我不知道如何在完成輸入后退格字母。 我試圖減少 I 但這也不起作用。 另外，如何添加延遲以便退格效果不會立即開始？

 var i = 0; var txt = 'Lorem ipsum dummy text blabla.'; var speed = 50; function typeWriter() { if (i < txt.length) { document.getElementById("demo").innerHTML += txt.charAt(i); i++; setTimeout(typeWriter, speed); } if(i >= txt.length){ document.getElementById("demo").innerHTML -= txt.charAt(i); i--; setTimeout(typeWriter, speed); } }

 <!DOCTYPE html> <html> <body> <h1>Typewriter</h1> <button onclick="typeWriter()">Click me</button> <p id="demo"></p> </body> </html>

Answer 1

您可以使用boolean值（true 或 false）來跟蹤是否退格。 如果你不是，你想增加i如果你退格然后你想減少i 。 在這里，我使用.substring來獲取從索引 0 到給定索引的字符串的一部分。

請參閱下面的示例：

 var i = 0; var txt = 'Lorem ipsum dummy text blabla.'; var speed = 50; var backspace = false; var outputElem = document.getElementById("demo"); // get element when page loads function typeWriter() { outputElem.textContent = txt.substring(0, i); if (i > txt.length) backspace = true; if (i == 0) backspace = false; i = i + (backspace ? -1 : 1); setTimeout(typeWriter, speed); }

 <h1>Typewriter</h1> <button onclick="typeWriter()">Click me</button> <p id="demo"></p>

如果您想完全停止循環（在退格之后），您可以向setTimeout函數調用添加條件。 此外，您可以在打字和退格之間設置delay ：

 var i = 0; var txt = 'Lorem ipsum dummy text blabla.'; var speed = 50; let delay = 25; var backspace = false; var outputElem = document.getElementById("demo"); function typeWriter() { outputElem.textContent = txt.substring(0, i); if (i > txt.length + delay) backspace = true; if (i == -1) backspace = false; i = i + (backspace ? -1 : 1); if(i != -1) setTimeout(typeWriter, speed); }

 <h1>Typewriter</h1> <button onclick="typeWriter()">Click me</button> <p id="demo"></p>

JavaScript 打字機退格效果

問題描述

1 個解決方案

解決方案1
2 已采納 2019-02-13 02:40:11

JavaScript 打字機退格效果

問題描述

1 個解決方案

解決方案1 2 已采納 2019-02-13 02:40:11

解決方案1
2 已采納 2019-02-13 02:40:11