要件は次のとおりです。
1. Webページにクラス内のすべての人の名前を表示します。
2。[スタート]ボタンをクリックすると、その人の色が変更され始めます。停止すると、色が異なるポジションがあり、このポジションはクリックされている学生です。
大まかなグラフィカルインターフェイスは次のとおりです。
以下は、上記の要件分析の特定の分析です。
1.そのようなページを初期化し、統一された色 - 緑を設定します。
a。学生の名前は配列に保存されます
b。ページのDivブロックに表示します
2.その色を-redに変更する位置をランダムに選択します
a。 CSSスタイルを使用して、色の変化を制御します
b。ランダムな位置は、ランダム関数を使用して生成されます
3。アニメーション効果を作成するには、間隔時間を設定して、その色の位置を後方に移動します。前の位置の色を緑に復元します。
a。 Divの色を変更する方法を設計する必要があります。同時に、間隔時間と呼ばれるメソッドを呼び出す必要があります。次に、JSで選択するSettimeOutとSetIntervalメソッドがあります。
4.アニメーション効果は指定された時間内に停止する必要があり、停止位置はまだ赤です。
a。アニメーション効果は指定された時間内に停止し、実際には上記の方法を停止しています。異なる実装フォームを使用して、JSで異なる方法を使用します
5.特定の位置で停止すると、選択された学生が誰であるかを示すダイアログボックスが表示されます。
a。アラート関数がポップアップする最終結果は大丈夫です
次のセクションでは、この小さなアプリケーションはJavaScriptコードに実装されます。