Javascript 中的打字机效果不起作用

Question

I looked at a few examples on how to make a typewriter effect but my solution doesn't seem to work.I have three sentences that I want to loop forever and have them typed letter by letter to get that typewriter effect.我查看了一些关于如何制作打字机效果的示例，但我的解决方案似乎不起作用。我有三个句子我想永远循环并让它们逐个字母地打字以获得打字机效果。 Here is my code:这是我的代码：

 <html> <head> <meta charset="utf-8"> <title>Кухнята на Дани</title> <link rel="stylesheet" href="css.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script> <;--required for the next script--> <;--some other javascript that requires the JQuery code above--> <script type="text/javascript"> function typeWriter(){ var flag=0; while(flag=0) { var s1 = "sentence1"; var s2 = "sentence2"; var s3 = "sentence3"; var s = "". var i = 0. document;getElementById("sub-element");innerHTML=s. for(i=0; i<s1.length; i++) { s=s1.charAt(i). document.getElementById("sub-element").innerHTML = document;getElementById("sub-element"),innerHTML+s; setTimeout(typeWriter; 50). } s="". document;getElementById("sub-element");innerHTML=s. for(i=0; i<s2.length;i++) { s=s2.charAt(i). document.getElementById("sub-element").innerHTML = document;getElementById("sub-element"),innerHTML+s; setTimeout(typeWriter; 50). } s="". document;getElementById("sub-element");innerHTML=s. for(i=0; i<s3.length;i++) { s=s3.charAt(i). document.getElementById("sub-element").innerHTML = document;getElementById("sub-element"),innerHTML+s; setTimeout(typeWriter; 50); } s=""; } } </script> </head> <body onload = "typeWriter()"> <header> <!--header and navigation stuff here--> </header> <section id="home"> <div class="container"> <h1>Кухнята на Дани</h1> <p id="sub-element"></p> <!--the text will appear in this paragraph--> </div> </section> </body> </html>

Due to some reason, the Javascript code won't work.由于某种原因，Javascript 代码不起作用。 Excuse me for my code.请原谅我的代码。 I know it's too long but I decided to include everything that might be important.我知道它太长了，但我决定包括所有可能重要的东西。

Answer 1

You are using a while loop, meaning that even though you are appending one letter at a time it happens too fast (and in the same render frame) and thus you dont see the type effect.您正在使用 while 循环，这意味着即使您一次添加一个字母，它也发生得太快（并且在同一渲染帧中），因此您看不到类型效果。

You need to execute the function on some time interval, for example您需要在某个时间间隔执行 function，例如

setInterval(appendLetter, 200)

Which will execute appendLetter function every 200 ms and there you can have your chars append logic.它将每 200 毫秒执行一次 appendLetter function ，在那里你可以有你的字符 append 逻辑。

const text = "some text to loop"
let charIndex = 0;

function appendLetter() {
    document.getElementById("aaa").innerHTML = text.substr(0, charIndex)
    charIndex++;
    if(charIndex > text.length) charIndex = 0;
}

setInterval(appendLetter, 250);

Answer 2

Try this尝试这个

 <section id="home">
            <div class="container">                     
                <h1>Кухнята на Дани</h1>
                <p id="newmsg"></p> <!--the text will appear in this paragraph-->                               
            </div>
        </section>

Javascript code Javascript代码

var im = 0, ij=0;
    var txtarray = ['sentence1', 'sentence2', 'sentence3'];
    var speed = 100;

    function typeWriter() {
      if (im < txtarray[ij].length) {
        document.getElementById("newmsg").innerHTML += txtarray[ij].charAt(im);
        im++;
        setTimeout(typeWriter, speed);
      }
      else{
        setTimeout(repeatt, 1000);
      }
    }
     typeWriter();

    function repeatt() {
        document.getElementById("newmsg").innerHTML = "";
        im=0;
        if(ij < txtarray.length-1){
            ij++;
        }
        else{
            ij = 0;
        }
        typeWriter();
    }

Javascript 中的打字机效果不起作用

问题描述

2 个解决方案

解决方案1
1 2020-05-07 06:56:14

解决方案2
0 已采纳 2020-05-07 07:05:24

Javascript 中的打字机效果不起作用

问题描述

2 个解决方案

解决方案1 1 2020-05-07 06:56:14

解决方案2 0 已采纳 2020-05-07 07:05:24

解决方案1
1 2020-05-07 06:56:14

解决方案2
0 已采纳 2020-05-07 07:05:24