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

Question

我查看了一些关于如何制作打字机效果的示例，但我的解决方案似乎不起作用。我有三个句子我想永远循环并让它们逐个字母地打字以获得打字机效果。 这是我的代码：

 <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>

由于某种原因，Javascript 代码不起作用。 请原谅我的代码。 我知道它太长了，但我决定包括所有可能重要的东西。

Answer 1

您正在使用 while 循环，这意味着即使您一次添加一个字母，它也发生得太快（并且在同一渲染帧中），因此您看不到类型效果。

您需要在某个时间间隔执行 function，例如

setInterval(appendLetter, 200)

它将每 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

尝试这个

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

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