函数不改变变量的值

Question

我在一个HTML页面上工作，我希望首先执行函数打字机，然后让一个循环开始打印'.'，使它看起来像一个加载屏幕。

这是我使用的代码：

​

var y = 0
var i = 0;
var txt = '//Welcome To My Playground!';
var speed = 100;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("typing").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
  y = 1;
}

while (y == 1) {
  var span = document.getElementById('myspan');
  var int = setInterval(function() {
    if ((span.innerHTML += '.').length == 11)
      span.innerHTML = '';
  }, 200);
}
window.onload = typeWriter;

<div class="main d-none d-lg-block">
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-1">Hi,<br>I'm Shalaj<span id="myspan"></span>
      </h1>
      <h1 id="typing" class="display-5" style="margin-top:30px;"></h1>
      <h1 class="display-5" style="margin-top:100px;">
        Prototyping = ["Arduino", "Raspberry Pi"]
        <br> Languages = ["HTML", "CSS", "PYTHON", "C++"]
      </h1>
    </div>
  </div>
</div>

​

函数typewriter()正在执行，但它后面的代码没有启动，我认为这是因为y的值没有设置为1。有人能帮我吗？

谢谢

Answer 1

也许你可以创建另一个名为y的函数：

​

var i = 0;
var txt = '//Welcome To My Playground!';
var speed = 100;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("typing").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  } else {
    typeEllipses();
  }
}

function typeEllipses() {
  var span = document.getElementById('myspan');
  var int = setInterval(function() {
    if ((span.innerHTML += '.').length == 11)
      span.innerHTML = '';
  }, 200);
}
window.onload = typeWriter;

<div class="main d-none d-lg-block">
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-1">Hi,<br>I'm Shalaj<span id="myspan"></span>
      </h1>
      <h1 id="typing" class="display-5" style="margin-top:30px;"></h1>
      <h1 class="display-5" style="margin-top:100px;">
        Prototyping = ["Arduino", "Raspberry Pi"]
        <br> Languages = ["HTML", "CSS", "PYTHON", "C++"]
      </h1>
    </div>
  </div>
</div>

​

Answer 2

如果你改变了，你可以看到发生了什么

while(statement) {
  //code
}

至

do{
   //code
}while(statement)

do...while循环只执行一次。这是因为它在执行时只运行了一次，也就是y == 0。您所使用的while循环根本不会触发，因为它的语句只会被解释一次，就是y == 0。

如果您想在每次调用typeWriter()时都调用它，那么您已经有了该函数的递归循环，所以只需将while代码放在它自己的函数中并从内部调用它即可。

​

var y = 0
var i = 0;
var txt = '//Welcome To My Playground!';
var speed = 100;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("typing").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
  console.log(y)
  y = 1;
}

do{
  console.log("test")
  /*var span = document.getElementById('myspan');
  var int = setInterval(function() {
    if ((span.innerHTML += '.').length == 11)
      span.innerHTML = '';
  }, 200);*/
}while (y == 1) 
window.onload = typeWriter;

<div id="typing"></div>

​

Answer 3

嘿，试试这个不需要循环，如果你使用无限的while循环，它会崩溃。因此，只需使用setInterval并在完成加载后使用clearInterval()清除该间隔即可清除该间隔

​

    var y = 0
    var i = 0;
    var txt = '//Welcome To My Playground!';
    var speed = 100;

    function typeWriter() {
      if (i < txt.length) {
        document.getElementById("typing").innerHTML += txt.charAt(i);
        i++;
        setTimeout(typeWriter, speed);
      }
      y = 1;
    }

 
      var span = document.getElementById('myspan');
      var interval = setInterval(function () {
        if ((span.innerHTML += '.').length == 11)
          span.innerHTML = '';
      }, 200);
    
    window.onload = typeWriter;

  <div class="main d-none d-lg-block">
    <div class="jumbotron jumbotron-fluid">
      <div class="container">
        <h1 class="display-1">Hi,<br>I'm Shalaj<span id="myspan"></span>
        </h1>
        <h1 id="typing" class="display-5" style="margin-top:30px;"></h1>
        <h1 class="display-5" style="margin-top:100px;">
          Prototyping = ["Arduino", "Raspberry Pi"]
          <br>
          Languages = ["HTML", "CSS", "PYTHON", "C++"]
        </h1>
      </div>
    </div>
  </div>

​