使用另一个变量创建打字机效果

Question

我想使用变量制作打字机效果。我的变量将 select 列出的随机字符串写入。我希望它以相同的方式列出字符串，但我希望它使用打字机效果来完成！

我怎么看都找不到打字机效果的答案，不会打字的功能！我希望它根据变量键入随机文本！谢谢！

这是我的代码。

Finalising Deletion...
<progress></progress>
<!DOCTYPE html>
<html>
<body>

<br><br>

<button onclick="typeWriter()">View Status</button>

<p id="demo"></p>

<script>
var i = 0;
var txt = randomText();
var speed = 50;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += (i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
  function randomText() {
              //array splashes
              var say = [];
              say[0] = "Moving Core Files...";
              say[1] = "Deleting JavaScript";
              say[2] = "Uploading Data...";
              say[3] = "Editing HTML...";
              say[4] = "Disabling Server.js";
              say[5] = "Deleting Cookies...";
              say[6] = "Deleted Files (3/754)";
              say[7] = "Attempting URL Shutdown";
              say[8] = "Uploading Deletion Program!";
              say[9] = "Deleting URL...";
              say[10] = "Changing CSS";
              say[11] = "Deleting Inside Fules...";
             
           
              
              //pick a random greeting
              var howmany = 11;
              var bRand = 0;
              bRand = Math.random();
              bRand = Math.floor(bRand * howmany);
              //prepare and docwrite the greeting
              sayWhat = say[bRand];
              document.write(sayWhat);
              document.close();
              //direct type in html p element
              //document.getElementById("splash").innerHTML ='javascript:alert("' + '");'
              // I tried to make this work but it says no.
            }
  
</script>

</body>
</html>
  <script style="color:white" language="JavaScript" type="text/javascript">
            //script to generate random greetings
            
    </script>
    <script style="color:white" type="text/javascript">
      
    </script>

Answer 1

嗯，您的 randomText 函数没有 return 任何东西。所以变量 txt 总是 undefined。您需要在 randomText 函数的末尾添加 return sayWhat。

此外，在您的 typeWriter 函数中，您附加的是字母的实际索引，而不是字母本身。通过将 += (i) 替换为 += txt[i] 也已解决。

如果您不想显示初始值，您还需要删除 document.write 行。

<progress></progress>
<!DOCTYPE html>
<html>
<body>
  <br><br>
  <button onclick="typeWriter()">View Status</button>

  <p id="demo"></p>

  <script>
    var i = 0;
    var txt = randomText();
    var speed = 50;

    function typeWriter() {
      if (i < txt.length) {
        document.getElementById("demo").innerHTML += txt[i];
        i++;
        setTimeout(typeWriter, speed);
      }
    }

    function randomText() {
      //array splashes
      var say = [];
      say[0] = "Moving Core Files...";
      say[1] = "Deleting JavaScript";
      say[2] = "Uploading Data...";
      say[3] = "Editing HTML...";
      say[4] = "Disabling Server.js";
      say[5] = "Deleting Cookies...";
      say[6] = "Deleted Files (3/754)";
      say[7] = "Attempting URL Shutdown";
      say[8] = "Uploading Deletion Program!";
      say[9] = "Deleting URL...";
      say[10] = "Changing CSS";
      say[11] = "Deleting Inside Fules...";



      //pick a random greeting
      var howmany = 11;
      var bRand = 0;
      bRand = Math.random();
      bRand = Math.floor(bRand * howmany);
      //prepare and docwrite the greeting
      sayWhat = say[bRand];
      //direct type in html p element
      //document.getElementById("splash").innerHTML ='javascript:alert("' + '");'
      // I tried to make this work but it says no.
      
      return sayWhat;
    }
  </script>

</body>

</html>
<script style="color:white" language="JavaScript" type="text/javascript">
  //script to generate random greetings
</script>
<script style="color:white" type="text/javascript">
</script>

使用另一个变量创建打字机效果

Create a Typewriter Effect with another Variable

html

javascript

glitch-framework