JavaScript實現班級隨機點名小應用需求的具體分析

2024-05-06 16:05:46

字體：大中小

來源：轉載

供稿：網友

班級隨機點名小應用，點擊開始按鈕，人員的顏色開始變化，當停止的時候，會有一個顏色不同的位置，那么這個位置就是被點到的同學了

需求如下：

1.在網頁中顯示，班級所有人員的名字。

2.點擊開始按鈕，人員的顏色開始變化，當停止的時候，會有一個顏色不同的位置，那么這個位置就是被點到的同學了。

大致的圖形界面如下：

下面是對上面的需求分析的具體分析如下：

1.初始化這樣一個頁面，并設置統一顏色-green。

a.同學的名字，用數組存儲

b.在頁面用div塊顯示

2.隨機選擇一個位置讓其顏色變化成-red

a.顏色的變化用css樣式去控制

b.隨機的位置用隨機函數去生成

3.為了讓其有動畫的效果，設置間隔時間讓其顏色變化的位置向后移動。并且將上一個位置的顏色，恢復成綠色。

a.需要設計一個方法，讓div的顏色產生變化，同時向后移動應該調用一個間隔時間調用的方法，那么js中有settimeout，setinterval方法可供選擇使用

4.動畫的效果，應該在指定的時間內停止，停止的位置仍然是紅色。

a.動畫效果在指定的時間內停止，實際上就是停止上述方法。在js中使用不同的方法，有不同的實現形式

5.當停止在某個位置以后，彈出一個對話框，顯示誰是被選中的同學。

a.Alert函數彈出最終的結果就ok了

在下一節中，將對這個小應用進行javascript代碼的實現哦。

上一篇：七個很有意思的PHP函數

下一篇：Javascript仿PHP $_GET獲取URL中的參數