JavaScript實(shí)現(xiàn)班級(jí)隨機(jī)點(diǎn)名小應(yīng)用需求的具體分析
更新時(shí)間：2014年05月12日 10:48:25 作者：
班級(jí)隨機(jī)點(diǎn)名小應(yīng)用，點(diǎn)擊開始按鈕，人員的顏色開始變化，當(dāng)停止的時(shí)候，會(huì)有一個(gè)顏色不同的位置，那么這個(gè)位置就是被點(diǎn)到的同學(xué)了
需求如下：
1.在網(wǎng)頁(yè)中顯示，班級(jí)所有人員的名字。
2.點(diǎn)擊開始按鈕，人員的顏色開始變化，當(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)畫的效果，設(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)畫的效果，應(yīng)該在指定的時(shí)間內(nèi)停止，停止的位置仍然是紅色。
a.動(dòng)畫效果在指定的時(shí)間內(nèi)停止，實(shí)際上就是停止上述方法。在js中使用不同的方法，有不同的實(shí)現(xiàn)形式
5.當(dāng)停止在某個(gè)位置以后，彈出一個(gè)對(duì)話框，顯示誰(shuí)是被選中的同學(xué)。
a.Alert函數(shù)彈出最終的結(jié)果就ok了
在下一節(jié)中，將對(duì)這個(gè)小應(yīng)用進(jìn)行javascript代碼的實(shí)現(xiàn)哦。
1.在網(wǎng)頁(yè)中顯示，班級(jí)所有人員的名字。
2.點(diǎn)擊開始按鈕，人員的顏色開始變化，當(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)畫的效果，設(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)畫的效果，應(yīng)該在指定的時(shí)間內(nèi)停止，停止的位置仍然是紅色。
a.動(dòng)畫效果在指定的時(shí)間內(nèi)停止，實(shí)際上就是停止上述方法。在js中使用不同的方法，有不同的實(shí)現(xiàn)形式
5.當(dāng)停止在某個(gè)位置以后，彈出一個(gè)對(duì)話框，顯示誰(shuí)是被選中的同學(xué)。
a.Alert函數(shù)彈出最終的結(jié)果就ok了
在下一節(jié)中，將對(duì)這個(gè)小應(yīng)用進(jìn)行javascript代碼的實(shí)現(xiàn)哦。
您可能感興趣的文章:
- javascript實(shí)現(xiàn)的一個(gè)隨機(jī)點(diǎn)名功能
- 使用javascript做的一個(gè)隨機(jī)點(diǎn)名程序
- JS實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名和順序點(diǎn)名
- js實(shí)現(xiàn)隨機(jī)點(diǎn)名系統(tǒng)(實(shí)例講解)
- JS+CSS實(shí)現(xiàn)隨機(jī)點(diǎn)名(實(shí)例代碼)
- js實(shí)現(xiàn)隨機(jī)點(diǎn)名小功能
- JS實(shí)現(xiàn)隨機(jī)點(diǎn)名器
- JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器
- JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器實(shí)例詳解
- JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名網(wǎng)頁(yè)
相關(guān)文章
這篇文章主要給大家愛介紹了關(guān)于利用Javascript獲取選擇文本所在的句子的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起看看吧。2017-12-12
JavaScript中有關(guān)一個(gè)數(shù)組中最大值和最小值及它們的下表的輸出的解決辦法
這篇文章主要介紹了JavaScript中有關(guān)一個(gè)數(shù)組中最大值和最小值及它們的下表的輸出的一種解決辦法，本文還給大家介紹了js快速獲取數(shù)組中最大值和最小值的方法，非常不錯(cuò),需要的朋友可以參考下2016-07-07
下面小編就為大家分享一篇JS刪除數(shù)組里的某個(gè)元素方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
微信小程序時(shí)間標(biāo)簽和時(shí)間范圍的聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序時(shí)間標(biāo)簽和時(shí)間范圍的聯(lián)動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
下面小編就為大家分享一篇圖片加載完成再執(zhí)行事件的實(shí)例，具有很好的參考價(jià)值，一起跟隨小編過(guò)來(lái)看看吧，希望對(duì)大家有所幫助2017-11-11
js判斷iframe中元素是否存在的實(shí)現(xiàn)代碼
這篇文章主要介紹了js判斷iframe中元素是否存在的實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-12-12
window.opener，是通過(guò)window.open打開子窗體的父窗體的引用，下面為大家詳細(xì)介紹下其具體的使用方法，感興趣的朋友可以參考下2013-08-08
IE中鼠標(biāo)經(jīng)過(guò)option觸發(fā)mouseout的解決方法
這篇文章主要介紹了IE中鼠標(biāo)經(jīng)過(guò)option觸發(fā)mouseout的解決方法,分析了IE中鼠標(biāo)移到option時(shí)window.event.toElement返回值為null的原因及解決方法,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了p5.js入門教程之圖片加載,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
js省市聯(lián)動(dòng)效果完整實(shí)例代碼
這篇文章主要介紹了js省市聯(lián)動(dòng)效果完整實(shí)例代碼,涉及JavaScript數(shù)組的定義與遍歷技巧,代碼非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-12-12