JavaScript實現班級隨機點名小應用需求的具體分析
更新時間：2014年05月12日 10:48:25 作者：
班級隨機點名小應用，點擊開始按鈕，人員的顏色開始變化，當停止的時候，會有一個顏色不同的位置，那么這個位置就是被點到的同學了
需求如下：
1.在網頁中顯示，班級所有人員的名字。
2.點擊開始按鈕，人員的顏色開始變化，當停止的時候，會有一個顏色不同的位置，那么這個位置就是被點到的同學了。
大致的圖形界面如下：
下面是對上面的需求分析的具體分析如下：
1.初始化這樣一個頁面，并設置統(tǒng)一顏色-green。
a.同學的名字，用數組存儲
b.在頁面用div塊顯示
2.隨機選擇一個位置讓其顏色變化成-red
a.顏色的變化用css樣式去控制
b.隨機的位置用隨機函數去生成
3.為了讓其有動畫的效果，設置間隔時間讓其顏色變化的位置向后移動。并且將上一個位置的顏色，恢復成綠色。
a.需要設計一個方法，讓div的顏色產生變化，同時向后移動應該調用一個間隔時間調用的方法，那么js中有settimeout，setinterval方法可供選擇使用
4.動畫的效果，應該在指定的時間內停止，停止的位置仍然是紅色。
a.動畫效果在指定的時間內停止，實際上就是停止上述方法。在js中使用不同的方法，有不同的實現形式
5.當停止在某個位置以后，彈出一個對話框，顯示誰是被選中的同學。
a.Alert函數彈出最終的結果就ok了
在下一節(jié)中，將對這個小應用進行javascript代碼的實現哦。
1.在網頁中顯示，班級所有人員的名字。
2.點擊開始按鈕，人員的顏色開始變化，當停止的時候，會有一個顏色不同的位置，那么這個位置就是被點到的同學了。
大致的圖形界面如下：
下面是對上面的需求分析的具體分析如下：
1.初始化這樣一個頁面，并設置統(tǒng)一顏色-green。
a.同學的名字，用數組存儲
b.在頁面用div塊顯示
2.隨機選擇一個位置讓其顏色變化成-red
a.顏色的變化用css樣式去控制
b.隨機的位置用隨機函數去生成
3.為了讓其有動畫的效果，設置間隔時間讓其顏色變化的位置向后移動。并且將上一個位置的顏色，恢復成綠色。
a.需要設計一個方法，讓div的顏色產生變化，同時向后移動應該調用一個間隔時間調用的方法，那么js中有settimeout，setinterval方法可供選擇使用
4.動畫的效果，應該在指定的時間內停止，停止的位置仍然是紅色。
a.動畫效果在指定的時間內停止，實際上就是停止上述方法。在js中使用不同的方法，有不同的實現形式
5.當停止在某個位置以后，彈出一個對話框，顯示誰是被選中的同學。
a.Alert函數彈出最終的結果就ok了
在下一節(jié)中，將對這個小應用進行javascript代碼的實現哦。
相關文章
這篇文章主要給大家愛介紹了關于利用Javascript獲取選擇文本所在的句子的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起看看吧。2017-12-12
JavaScript中有關一個數組中最大值和最小值及它們的下表的輸出的解決辦法
這篇文章主要介紹了JavaScript中有關一個數組中最大值和最小值及它們的下表的輸出的一種解決辦法，本文還給大家介紹了js快速獲取數組中最大值和最小值的方法，非常不錯,需要的朋友可以參考下2016-07-07
下面小編就為大家分享一篇JS刪除數組里的某個元素方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了微信小程序時間標簽和時間范圍的聯動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
下面小編就為大家分享一篇圖片加載完成再執(zhí)行事件的實例，具有很好的參考價值，一起跟隨小編過來看看吧，希望對大家有所幫助2017-11-11
這篇文章主要介紹了js判斷iframe中元素是否存在的實現代碼,需要的朋友可以參考下2016-12-12
window.opener，是通過window.open打開子窗體的父窗體的引用，下面為大家詳細介紹下其具體的使用方法，感興趣的朋友可以參考下2013-08-08
IE中鼠標經過option觸發(fā)mouseout的解決方法
這篇文章主要介紹了IE中鼠標經過option觸發(fā)mouseout的解決方法,分析了IE中鼠標移到option時window.event.toElement返回值為null的原因及解決方法,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了p5.js入門教程之圖片加載,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了js省市聯動效果完整實例代碼,涉及JavaScript數組的定義與遍歷技巧,代碼非常具有實用價值,需要的朋友可以參考下2015-12-12