Javascriptの基本的なアニメーション回転スティール

-2

私はこの機能で何が起こっているのか分かりません。誰かが段階的にそれを分解することができますか？Javascriptの基本的なアニメーション回転スティール

<html> 
    <head> 
     <title>JavaScript basic animation</title> 
    </head> 
    <body onload="animate_string('target')"> 
     <p id="target">w3resource</p> 
    </body> 
</html> 

function animate_string(id) { 
var element = document.getElementById(id); 
var textNode = element.childNodes[0]; // assuming no other children 
var text = textNode.data; 

    setInterval(function() { 
    text = text[text.length - 1] + text.substring(0, text.length - 1); 
    textNode.data = text; 
    }, 100); 
}

出典

2016-04-26 ZZ83

コードレビューは、他の誰かが書いたコードを説明するものではありません。 – JJJ

@Tuvia on CRのレビュー担当者は、査読者に自分のコードが何をしているのかを説明することができます。 –

@ Mat'sMugそうですが、スタックオーバーフローはそうではありません。次に、コードレビューは何ですか？ – Tuvia

それはのように読んでいました：「最初から始まる第二のすべての10を、それが現在持っている最後の文字が含まれるようにtextという名前の変数を変更し、残りの文字が続きます」

あなたが最初の反復でABCDを持っているのであれば、それは（先頭から残り、）ABC続いD（最後の文字）になり

変数textはFRが来ますom textNodeの内容はpであり、のターゲットは IDです。

出典

2016-04-26 20:14:36

確かに、私は助けることができます。

まず、アニメーション化するテキストを取得する必要があるため、id属性（この場合は 'target'）で要素のタグを探します。したがって、可変要素は 'p'タグになります

var element = document.getElementById(id);

次の行は、要素内のテキストノードと呼ばれる隠しDOMノードに実際にアクセスします。実際のテキスト文字列にアクセスするには、テキストノード要素の.data属性を使用する必要があります。これは、テキストノード自体に関連付けられた一連の属性があり、コンテンツ（データ）のみを扱うからです。

var textNode = element.childNodes[0]; // assuming no other children 
var text = textNode.data;

ここでは、文字列値 'w3resource'を保持する変数textがあります。次のステップは、100ミリ秒ごとに呼び出された関数の内部で100ms毎に

setInterval(function() { 
    ... 
}, 100);

機能を実行する間隔で実行されるアニメーション、以下のコードを見てを行うことです。

まず

text = text[text.length - 1] + text.substring(0, text.length - 1); 
    textNode.data = text;

文字列の最後の文字を取り、残りの文字列を追加することによって新しい文字列が作成されます。たとえば、 'StackOverflow'は 'wStackOverflo'になります。次の反復では、100msごとに 'wStackOverflo'を 'owStackOverfl'などに変換します。

最後のコード行は、テキストを含むテキストノードであるHTML DOM要素に新しい文字列を割り当てます。

出典

2016-04-26 20:17:55

Javascriptの基本的なアニメーション回転スティール

答えて

関連する問題