[英]Typewriter effect in Javascript not working
我查看了一些關於如何制作打字機效果的示例,但我的解決方案似乎不起作用。我有三個句子我想永遠循環並讓它們逐個字母地打字以獲得打字機效果。 這是我的代碼:
<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 代碼不起作用。 請原諒我的代碼。 我知道它太長了,但我決定包括所有可能重要的東西。
您正在使用 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);
嘗試這個
<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();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.