函数不改变变量的值

Question

我正在处理一个 HTML 页面，我希望首先执行功能打字机，然后循环启动打印“。”，使其看起来像一个加载屏幕。这是我正在使用的代码：var y = 0var 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

试试这个，

  var i = 0;

  var txt = "//Welcome To My Playground!";

  var speed = 100;

  var loading;

  function typeWriter() {

    if (i < txt.length) {

      document.getElementById("typing").innerHTML += txt.charAt(i);

      i++;

      setTimeout(typeWriter, speed);

    } else {

        var span = document.getElementById("myspan");

        var loading = setInterval(function () {

            span.innerHTML = span.innerHTML.length == 11 ? "" : span.innerHTML;

            span.innerHTML += ".";

        }, speed);

        // clearInterval(loading); // to stop loading dots

    }

  }

Answer 3

嘿试试这个不需要循环如果你使用无限循环它会崩溃。因此，一旦完成加载，只需使用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>