Question

我从w3s https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_typewriter那里得到了这段代码，在输入完后我不知道如何退格。我已经尝试过减少我，但是那也不起作用。另外，如何添加延迟以使退格效果不会立即开始？

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。在这里，我使用.substr来获取从索引0到给定索引的字符串的一部分。

请参见以下示例：

var i = 0;
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;
var backspace = false;

function typeWriter() {
  document.getElementById("demo").innerHTML = txt.substr(0, i);

  if (i > txt.length) backspace = true;
  if (i == 0) backspace = false;
  backspace ? i-- : i++;
  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;

function typeWriter() {
  document.getElementById("demo").innerHTML = txt.substr(0, i);

  if (i > txt.length + delay) backspace = true;
  if (i == -1) backspace = false;
  backspace ? i-- : i++;
  if(i != -1) setTimeout(typeWriter, speed);
}

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

JavaScript打字机退格效果

1 个答案: