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)頁中顯示，班級(jí)所有人員的名字。
2.點(diǎn)擊開始按鈕，人員的顏色開始變化，當(dāng)停止的時(shí)候，會(huì)有一個(gè)顏色不同的位置，那么這個(gè)位置就是被點(diǎn)到的同學(xué)了。
大致的圖形界面如下：
下面是對(duì)上面的需求分析的具體分析如下：
1.初始化這樣一個(gè)頁面，并設(shè)置統(tǒng)一顏色-green。
a.同學(xué)的名字，用數(shù)組存儲(chǔ)
b.在頁面用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ì)話框，顯示誰是被選中的同學(xué)。
a.Alert函數(shù)彈出最終的結(jié)果就ok了
在下一節(jié)中，將對(duì)這個(gè)小應(yīng)用進(jìn)行javascript代碼的實(shí)現(xiàn)哦。
1.在網(wǎng)頁中顯示，班級(jí)所有人員的名字。
2.點(diǎn)擊開始按鈕，人員的顏色開始變化，當(dāng)停止的時(shí)候，會(huì)有一個(gè)顏色不同的位置，那么這個(gè)位置就是被點(diǎn)到的同學(xué)了。
大致的圖形界面如下：
下面是對(duì)上面的需求分析的具體分析如下：
1.初始化這樣一個(gè)頁面，并設(shè)置統(tǒng)一顏色-green。
a.同學(xué)的名字，用數(shù)組存儲(chǔ)
b.在頁面用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ì)話框，顯示誰是被選中的同學(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)頁
相關(guān)文章
如何用JS模擬實(shí)現(xiàn)數(shù)組的map方法
這篇文章主要介紹了如何用JS模擬實(shí)現(xiàn)數(shù)組的map方法，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
一文詳解JavaScript中的相等運(yùn)算符與類型轉(zhuǎn)換
在?JavaScript?編程中,相等運(yùn)算符和類型轉(zhuǎn)換是理解語言行為的關(guān)鍵部分,雖然這些概念看似簡(jiǎn)單,但它們的細(xì)節(jié)可能會(huì)導(dǎo)致意想不到的結(jié)果,本文將深入探討?==?和?===?運(yùn)算符的區(qū)別、對(duì)象比較、以及?JavaScript?中的顯式和隱式類型轉(zhuǎn)換,需要的朋友可以參考下2024-07-07
帝國(guó)cms首頁列表頁實(shí)現(xiàn)點(diǎn)贊功能
這篇文章主要介紹了帝國(guó)cms首頁列表頁實(shí)現(xiàn)點(diǎn)贊功能的相關(guān)資料,需要的朋友可以參考下2017-10-10
JavaScript之a(chǎn)ppendChild、insertBefore和insertAfter使用說明
這幾天需要用到對(duì)HTML節(jié)點(diǎn)元素的刪/插操作，由于用到insertBefore方法的時(shí)候遇到了一些麻煩，現(xiàn)在作為知識(shí)的整理，分別對(duì)appendChild、insertBefore和insertAfter做個(gè)總結(jié)2010-12-12
這篇文章主要介紹了JavaScript框架特性，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了使用js繪制幾何圖形教程，本文主要是教大家繪制圓、弧、扇形,需要的朋友可以參考下2015-01-01
JS實(shí)現(xiàn)同時(shí)搜索百度和必應(yīng)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)同時(shí)搜索百度和必應(yīng)的方法,可實(shí)現(xiàn)在底部的兩個(gè)框架中同時(shí)顯示兩個(gè)搜索引擎的搜索結(jié)果,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了詳解babel升級(jí)到7.X采坑總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
我們會(huì)經(jīng)常使用iframes來加載第三方的內(nèi)容、廣告或者插件。使用iframe是因?yàn)樗梢院椭黜撁娌⑿屑虞d，不會(huì)阻塞主頁面。2011-07-07
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)多張圖片延遲加載效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07