シンプルタイプと消去効果が働いていません

シンプルなタイプを作成しようとしていますが、JavaScriptを使用してエフェクトを消去しようとしていますが、タイピング効果の後に最後の文字を削除しています。ここに私のコードは次のとおりです。シンプルタイプと消去効果が働いていません

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test Typing Effect</title> 
</head> 
<body> 
<script type="text/javascript"> 


window.onload =function() { 
var texttotype = "this is what i want to type"; 
var typedtext = ""; 

function eraze(){ 

if(typedtext != ""){    
    var eraze = setInterval(function(){ 
     typedtext = typedtext.slice(0, typedtext.length -1);      
     document.getElementById('type-here').innerHTML = typedtext; 
      if (typedtext == "") { 
       clearInterval(eraze); 
       return 
      }    
     }, 200);   
} 
} 

if(typedtext == ""){ 
    var i = 0; 
    var id = setInterval(function(){ 
     if(typedtext != texttotype){ 
      typedtext +=texttotype[i]; 
     document.getElementById('type-here').innerHTML = typedtext; 
     } else if (typedtext == texttotype) { 
      eraze();       
     } 
     i++;   
    }, 200);    
} 

} 
</script> 

<p id="type-here"></p> 
</body> 
</html>

はところで、コードの各部分は、個別に、タイピングの種類を動作し、消去は消去され、私はちょうどそれが、その後erazeを入力して取得傾けます。どんな方向性や示唆も高く評価されます。ありがとう!!!!

出典

2016-04-10 rod122

derloopkat無限のタイプの消去効果を作成したかったので、書き込み機能を停止しませんでした。それにもかかわらず、あなたが提案していることは、問題を修正して、今やテキストをぼやけさせることになります。どのようにこれをifiniteの書き込みerazeにするための任意のアイデア？ while（true）ループが動作していないようで、ブラウザがハングします。ありがとう!!! – rod122

私はソリューションをタイプして永久に消去するように更新しました。 – derloopkat

すべてのテキストが既に書き込まれた後にテキストを書き込む関数を停止する必要があります。さもなければ、それは文字列の終わりを超えて行き、 "undefined"をページに加えます。

window.onload = function() { 
var texttotype = "this is what i want to type"; 
var typedtext = ""; 

function eraze() { 

    if (typedtext != "") { 
     var eraze = setInterval(function() { 
      typedtext = typedtext.slice(0, typedtext.length - 1); 
      document.getElementById('type-here').innerHTML = typedtext; 
      if (typedtext == "") { //all done 
       clearInterval(eraze); 
       write(); 
       return 
      } 
     }, 200); 
    } 
} 
function write() { 
    if (typedtext == "") { 
     var i = 0; 
     var keepWriting = setInterval(function() { 
      if (typedtext != texttotype) { 
       typedtext += texttotype[i]; 
       document.getElementById('type-here').innerHTML = typedtext; 
      } else if (typedtext == texttotype) { 
       clearInterval(keepWriting); 
       eraze(); 
       return; 
      } 
      i++; 
     }, 200); 
    } 
} 
write(); 
}

出典

2016-04-11 00:32:47 derloopkat

解決策を更新しました。これは永遠に書き込みと消去を行います。さて、write関数は最初から書き込みを開始しますが、keepWritingは最後に書き込まれた文字から続けます。ページがロードされるときに最初に起こることは、関数が宣言され、write（）が実行されます。 – derloopkat

これは、ありがとう！ – rod122

シンプルタイプと消去効果が働いていません

答えて

関連する問題