函数不改变变量的值

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() {&nbsp; if (i < txt.length) {&nbsp; &nbsp; document.getElementById("typing").innerHTML += txt.charAt(i);&nbsp; &nbsp; i++;&nbsp; &nbsp; setTimeout(typeWriter, speed);&nbsp; } else {&nbsp; &nbsp; typeEllipses();&nbsp; }}function typeEllipses() {&nbsp; var span = document.getElementById('myspan');&nbsp; var int = setInterval(function() {&nbsp; &nbsp; if ((span.innerHTML += '.').length == 11)&nbsp; &nbsp; &nbsp; span.innerHTML = '';&nbsp; }, 200);}window.onload = typeWriter;<div class="main d-none d-lg-block">&nbsp; <div class="jumbotron jumbotron-fluid">&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; <h1 class="display-1">Hi,<br>I'm Shalaj<span id="myspan"></span>&nbsp; &nbsp; &nbsp; </h1>&nbsp; &nbsp; &nbsp; <h1 id="typing" class="display-5" style="margin-top:30px;"></h1>&nbsp; &nbsp; &nbsp; <h1 class="display-5" style="margin-top:100px;">&nbsp; &nbsp; &nbsp; &nbsp; Prototyping = ["Arduino", "Raspberry Pi"]&nbsp; &nbsp; &nbsp; &nbsp; <br> Languages = ["HTML", "CSS", "PYTHON", "C++"]&nbsp; &nbsp; &nbsp; </h1>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

试试这个，&nbsp; var i = 0;&nbsp; var txt = "//Welcome To My Playground!";&nbsp; var speed = 100;&nbsp; var loading;&nbsp; function typeWriter() {&nbsp; &nbsp; if (i < txt.length) {&nbsp; &nbsp; &nbsp; document.getElementById("typing").innerHTML += txt.charAt(i);&nbsp; &nbsp; &nbsp; i++;&nbsp; &nbsp; &nbsp; setTimeout(typeWriter, speed);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; var span = document.getElementById("myspan");&nbsp; &nbsp; &nbsp; &nbsp; var loading = setInterval(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; span.innerHTML = span.innerHTML.length == 11 ? "" : span.innerHTML;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; span.innerHTML += ".";&nbsp; &nbsp; &nbsp; &nbsp; }, speed);&nbsp; &nbsp; &nbsp; &nbsp; // clearInterval(loading); // to stop loading dots&nbsp; &nbsp; }&nbsp; }

Answer 3

嘿试试这个不需要循环如果你使用无限循环它会崩溃。因此，一旦完成加载，只需使用setInterval并清除间隔使用清除间隔clearInterval()&nbsp; &nbsp; var y = 0&nbsp; &nbsp; var i = 0;&nbsp; &nbsp; var txt = '//Welcome To My Playground!';&nbsp; &nbsp; var speed = 100;&nbsp; &nbsp; function typeWriter() {&nbsp; &nbsp; &nbsp; if (i < txt.length) {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("typing").innerHTML += txt.charAt(i);&nbsp; &nbsp; &nbsp; &nbsp; i++;&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(typeWriter, speed);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; y = 1;&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; var span = document.getElementById('myspan');&nbsp; &nbsp; &nbsp; var interval = setInterval(function () {&nbsp; &nbsp; &nbsp; &nbsp; if ((span.innerHTML += '.').length == 11)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; span.innerHTML = '';&nbsp; &nbsp; &nbsp; }, 200);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; window.onload = typeWriter;&nbsp; <div class="main d-none d-lg-block">&nbsp; &nbsp; <div class="jumbotron jumbotron-fluid">&nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; <h1 class="display-1">Hi,<br>I'm Shalaj<span id="myspan"></span>&nbsp; &nbsp; &nbsp; &nbsp; </h1>&nbsp; &nbsp; &nbsp; &nbsp; <h1 id="typing" class="display-5" style="margin-top:30px;"></h1>&nbsp; &nbsp; &nbsp; &nbsp; <h1 class="display-5" style="margin-top:100px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Prototyping = ["Arduino", "Raspberry Pi"]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Languages = ["HTML", "CSS", "PYTHON", "C++"]&nbsp; &nbsp; &nbsp; &nbsp; </h1>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>