JavaScript實(shí)現(xiàn)班級(jí)隨機(jī)點(diǎn)名小應(yīng)用需求的具體分析

2019-11-20 15:31:13

字體：大中小

供稿：網(wǎng)友

需求如下：

1.在網(wǎng)頁(yè)中顯示，班級(jí)所有人員的名字。

2.點(diǎn)擊開(kāi)始按鈕，人員的顏色開(kāi)始變化，當(dāng)停止的時(shí)候，會(huì)有一個(gè)顏色不同的位置，那么這個(gè)位置就是被點(diǎn)到的同學(xué)了。

大致的圖形界面如下：

下面是對(duì)上面的需求分析的具體分析如下：

1.初始化這樣一個(gè)頁(yè)面，并設(shè)置統(tǒng)一顏色-green。

a.同學(xué)的名字，用數(shù)組存儲(chǔ)

b.在頁(yè)面用div塊顯示

2.隨機(jī)選擇一個(gè)位置讓其顏色變化成-red

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

b.隨機(jī)的位置用隨機(jī)函數(shù)去生成

3.為了讓其有動(dòng)畫(huà)的效果，設(shè)置間隔時(shí)間讓其顏色變化的位置向后移動(dòng)。并且將上一個(gè)位置的顏色，恢復(fù)成綠色。

a.需要設(shè)計(jì)一個(gè)方法，讓div的顏色產(chǎn)生變化，同時(shí)向后移動(dòng)應(yīng)該調(diào)用一個(gè)間隔時(shí)間調(diào)用的方法，那么js中有settimeout，setinterval方法可供選擇使用

4.動(dòng)畫(huà)的效果，應(yīng)該在指定的時(shí)間內(nèi)停止，停止的位置仍然是紅色。

a.動(dòng)畫(huà)效果在指定的時(shí)間內(nèi)停止，實(shí)際上就是停止上述方法。在js中使用不同的方法，有不同的實(shí)現(xiàn)形式

5.當(dāng)停止在某個(gè)位置以后，彈出一個(gè)對(duì)話(huà)框，顯示誰(shuí)是被選中的同學(xué)。

a.Alert函數(shù)彈出最終的結(jié)果就ok了

在下一節(jié)中，將對(duì)這個(gè)小應(yīng)用進(jìn)行javascript代碼的實(shí)現(xiàn)哦。

上一篇：七個(gè)很有意思的PHP函數(shù)

下一篇：JavaScript中如何通過(guò)arguments對(duì)象實(shí)現(xiàn)對(duì)象的重載