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