首頁 > web前端 > js教程 > JavaScript實現班級隨機點名小應用需求的具體分析_javascript技巧

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

WBOY
發布: 2016-05-16 16:48:29
原創
1497 人瀏覽過

需求如下:

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

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

大致的圖形介面如下:

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

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

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.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板