以下にそのプロセスと原則について簡単に説明します。 ステップ 1: 匿名関数を実装し、自分で実行します。 コードをコピー コードは次のとおりです。 (function(){ })() この関数は、よく書かれた JS コードでよく見られます。これには、関数の後に () のペアを追加して、自動実行が必要であることを示します。ホスト (BOM 環境) が理解できるように () を使用します。内部の function(){} は匿名関数です。 ステップ 2: ボックスの明るさを変更することでアニメーションを実装します。 ID アニメーションを持つ div コードをコピーします コードは次のとおりです: アニメーションの透明なグラデーションを実現するには、このように透明度を変更する必要があります コードをコピー コードは次のとおりです: for(var i=0;i<10;i) { setTimeout((function(pos){ return function(){ someAnimation(pos); このコードを説明していきます。このコードは複雑でわかりにくいので、理解できなくても大丈夫です。まず、setTimeout の使い方を説明します。コードをコピーします。 コードは次のとおりです。 >setTimeout((function(){})(i/10),i*100) setTimeout の最初のパラメータは実行される関数であり、2 番目のパラメータはパラメータは時間パラメータで、実行を開始するまでにかかる時間を意味します ただし、js にはブロックの概念がなく、スコープは関数に基づいています。 したがって、ここで使用するクロージャ、実装原理は次のとおりです。 コードをコピーします コードは次のとおりです。 (function(){ return function(){} })() クロージャ パッケージを使用しない場合にのみ、for ループを実行して必要な結果を得ることができます。 コードをコピーします コードは次のようになります: for( var i=0 ;i<10;i ){ setTimeout(function(pos){ someAnimation(pos); }(i/10),i*100) } このような for ループは一度だけ実行されます (i=9 の場合)。興味のある学生は自分で試すことができます これまでのところ、コード全体は次のようになります コードコード コードは次のとおりです。引数; return function(){ } })() このようにして、IDアニメーション付きのボックスの透明度が0から1に変化します。 3 番目のステップは、継続的な変更を実現するために setInterval を使用します。setInterval には 2 つのパラメーターがあります。1 つ目は実行される関数で、2 つ目は実行間隔です。このコードは次のようになります。 far は次のとおりです: コードをコピー コードは次のとおりです:(function() {function someanimation（args）{document.getElementByid（ "Animation"）。 コード全体は次のとおりですコードをコピーします コードは次のとおりです: ;background-color:red;} </u> (function(){</a> function someAnimation(args){</span> document.getElementById("animation").style.opacity= args;</div> }<div class="codebody" id="code77458"> }<br> setInterval(function( ）{<surned>🎜> return function（）{<br>＆lt;/script＆gt; <br>＆lt;/body＆gt; <br>＆lt;/html＆gt;<br><br></surned> </div> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
