时间戳

首页 > 解决方案 > Javascript中的打字机效果不起作用

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

问题描述

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

<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 代码将无法工作。请原谅我的代码。我知道它太长了，但我决定包括所有可能重要的东西。

标签： javascripthtml

解决方案

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

您需要在某个时间间隔执行该功能，例如

setInterval(appendLetter, 200)

它将每 200 毫秒执行一次 appendLetter 函数，在那里你可以让你的字符附加逻辑。

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

推荐阅读