福彩雙色球，大部分朋友對(duì)此并不陌生吧，相信買過的朋友或多或少都對(duì)此有所研究，今天我們一起來用Axure8.0模擬做一個(gè)雙色的開獎(jiǎng)過程。今天使用的主要知識(shí)點(diǎn)有，全局變量的使用，中繼器的增刪以及排序。

預(yù)覽：

一、元件準(zhǔn)備

1、添加兩個(gè)中繼器，分別用來存放雙色的紅球和藍(lán)球，取名為“紅球”和“藍(lán)球”，初始時(shí)隱藏；

1. 分別在中繼器中放入一個(gè)橢圓形的元件，其中把放入“紅球”中繼器的橢圓形元件的邊框設(shè)置成紅色，字體也設(shè)置成紅色；放入“藍(lán)球”中繼器的橢圓形元件的邊框設(shè)置成藍(lán)色，字體也設(shè)置成藍(lán)色；并分別給這兩個(gè)橢圓形元件命名為“紅球中獎(jiǎng)號(hào)碼”和“藍(lán)球中獎(jiǎng)號(hào)碼”；
2. 設(shè)置“紅球”中繼器的布局樣式為水平，并勾選“網(wǎng)格排布”，設(shè)置“每排項(xiàng)目數(shù)”為6(因?yàn)榧t球數(shù)量為6個(gè))。

2、添加四個(gè)全局變量，分別取名為“red”、“blue”、“random”、“value”；4個(gè)全局變量的作用分別是：

• red：存放紅球的編號(hào)數(shù)值，我們都知道雙色球的紅色號(hào)碼是：01~33，這里我們就把這33個(gè)號(hào)碼存放到“red”這個(gè)全局變量中，全局變量的初始值我們這里設(shè)置成：<01><02><03><04><05><06><07><08><09><10><11><12><13><14><15><16><17><18><19><20><21><22><23><24><25><26><27><28><29><30><31><32><33>，至于為什么要這樣存放，這里先賣個(gè)關(guān)子，接著往下看就知道；
• blue：存放藍(lán)球的編號(hào)數(shù)值，雙色球的藍(lán)色號(hào)碼是：01~16，同“red”變量 一樣，這里把全局變量的初始值設(shè)置成：<01><02><03><04><05><06><07><08><09><10><11><12><13><14><15><16>；
• random：存放生成的隨機(jī)數(shù)，默認(rèn)為為空，目的是截取“red”或“blue”變量內(nèi)容的開始下標(biāo)；
• value：獲取從變量“red”或“blue”中截取到的號(hào)碼，默認(rèn)值為空。

3、添加7個(gè)橢圓形的元件，分別明明為“1”、“2”、“3”、“4”、“5”、“6”、“7”，用來存放開獎(jiǎng)時(shí)隨機(jī)抽取的號(hào)碼，其中前6個(gè)為紅色球，最后一個(gè)為藍(lán)色球，并將這7個(gè)元件設(shè)置成隱藏；

4、最后，還需要一個(gè)按鈕，命名為“抽獎(jiǎng)”，初始文字內(nèi)容為“開始抽獎(jiǎng)”；

至此，所有的元件已經(jīng)添加完畢，當(dāng)然你也可以添加幾個(gè)文字標(biāo)簽，讓界面更加醒目，我這里偷個(gè)懶，就不加文字標(biāo)簽了。

二、添加用例

1、首先給“抽獎(jiǎng)”按鈕添加用例

“抽獎(jiǎng)”按鈕有兩種情況：

• 第一次抽獎(jiǎng)；
• 重新抽獎(jiǎng)。

我們可以根據(jù)“抽獎(jiǎng)”按鈕的文字內(nèi)容去判斷是不是為第一次抽獎(jiǎng)。

（1）如果“抽獎(jiǎng)”按鈕的文字內(nèi)容為“開始抽獎(jiǎng)”，那么我們要執(zhí)行以下用例：

1）給全局變量“random”獲取一個(gè)隨機(jī)值，且這個(gè)值有一定的限值條件，這個(gè)值的范圍必須是：0~132，不能等于132，且必須是4的倍數(shù)。

• 為什么是這個(gè)范圍？因?yàn)椤皉andom”要跟“red”的長度去匹配，用于后續(xù)的截取“red”內(nèi)的特定內(nèi)容的開始位置，而“red”變量的初始值的長度就是132(下標(biāo)是從0開始的，所以“red”標(biāo)量的最大小標(biāo)是131)；
• 為什么必須是4的倍數(shù)？因?yàn)槲覀冊(cè)诙x“red”變量的時(shí)候是通過<>區(qū)分每一個(gè)球的號(hào)碼的，且包括<>在內(nèi)，每一個(gè)號(hào)碼的長度都是4；
• 怎么樣獲取這個(gè)數(shù)值？這里要用到數(shù)學(xué)函數(shù)里的隨機(jī)函數(shù)random()，因?yàn)镸ath.random()函數(shù)獲取的是0~1之間的小數(shù)，所以就需要通過特定的處理獲取0~132之間且為4的倍數(shù)的數(shù)字，通過Math.random()*99/3獲取0~33之間的數(shù)值，然后通過數(shù)學(xué)函數(shù)Math.floor()向下取整數(shù)，這樣就能取到0~32之間的全部整數(shù)，且包括0和32，然后再誠意4，就能取得0~132之間所有4的倍數(shù)的數(shù)值(包括0，不包括132)；

2）給全局變量“value”設(shè)置值，因?yàn)椤皏alue”變量是用來存放“red”或“blue”變量中截取的號(hào)碼的，在開始點(diǎn)擊“抽獎(jiǎng)”按鈕時(shí)，一般是從紅色球開始的，所以這里就要從“red”變量中截取抽中的紅色球的號(hào)碼，前面已經(jīng)提到過，球的號(hào)碼是通過<>開始和結(jié)束的，所以我們這里在截取球的號(hào)碼值時(shí)是截取長度為4，通過字符串函數(shù)substr()截??；

3）取得第一個(gè)紅色球的號(hào)碼，橢圓形元件“1”是用來存放 第一個(gè)紅色球的，所以就把第一個(gè)紅色球的號(hào)碼，賦給“1”。因?yàn)榻厝〉奶?hào)碼包括<>的4位長度的字符串，我們這里只需要<>內(nèi)的數(shù)值就可以了，所以還需要通過字符串函數(shù)substr()去截取“value”變量內(nèi)的數(shù)值，數(shù)值的長度是2；

4）顯示“1”。給“1”添加一個(gè)動(dòng)畫，這樣更直觀一些，我這里添加了一個(gè)“向右翻轉(zhuǎn)”的一個(gè)動(dòng)畫，時(shí)間是1s，大家可以根據(jù)自己喜好自行設(shè)計(jì)；

5）設(shè)定“red”變量值。這一步很重要，目的是防止取到相同的紅色球號(hào)碼。雙色球里，每個(gè)球最多只能取到一次，我還沒見到過取到兩個(gè)相同號(hào)碼的紅色球^_^，因?yàn)槲覀兠看稳〖t色球時(shí)，都是從“red”變量中截取的一段，所以每次在截取“red”后，就要把已經(jīng)取到的這段字符串從“red”變量中去掉，這樣就再也取不到這段字符串了，這樣就避免了取到重復(fù)號(hào)碼的紅色球了。設(shè)定“red”變量值是通過字符串替換函數(shù)replace()，如果不明白replace()函數(shù)的用法，大家可以問下度娘，它可是無所不能的哦；

6）添加“紅球”中繼器。這一步的目的是為了后續(xù)生成中獎(jiǎng)號(hào)碼排序用的。因?yàn)樵赼xure中，貌似只能在中繼器紅可以排序(雙色球開獎(jiǎng)時(shí)的號(hào)碼是隨機(jī)的，開獎(jiǎng)過程中并不是按大小出來號(hào)碼的，而是在中獎(jiǎng)號(hào)碼全部出來之后才按照大小排序的)。我們把“1”元件的文字內(nèi)容添加到“紅球”中繼器中備用；

7）禁用“抽獎(jiǎng)”按鈕。我們點(diǎn)擊“抽獎(jiǎng)”按鈕，已經(jīng)開始抽獎(jiǎng)了，總不能還可以再去點(diǎn)擊“抽獎(jiǎng)”吧，這樣豈不是亂套了，所以，這里要把“抽獎(jiǎng)”按鈕置為禁用狀態(tài)。為了更加直觀，可以給“抽獎(jiǎng)”按鈕設(shè)置文字內(nèi)容“抽獎(jiǎng)中……”；

8）添加“觸發(fā)事件”到“2”元件。Axure8.0中增加了一個(gè)“觸發(fā)事件”的用例，可以直接通過“觸發(fā)事件”去執(zhí)行另外一個(gè)元件上的特定的用例，我們這里把添加的用例都在“鼠標(biāo)單擊時(shí)”，所以這里的“觸發(fā)事件”觸發(fā)的是“2”元件的“鼠標(biāo)單擊時(shí)”用例；

（2）如果不是第一次抽獎(jiǎng)，那么我們就要按照以下的方式處理“抽獎(jiǎng)”按鈕的用例了；

1. 隱藏“1”、“2”、“3”、“4”、“5”、“6”、“7”元件。如果不是第一次抽獎(jiǎng)，那么這7個(gè)元件是顯示狀態(tài)的，所以在點(diǎn)擊“抽獎(jiǎng)”按鈕是，首先要把這7個(gè)元件設(shè)置為隱藏狀態(tài)；
2. 刪除“紅球”、“藍(lán)球”中繼器中的數(shù)據(jù)。清除之前抽獎(jiǎng)的數(shù)據(jù)；
3. 移除“紅球”中繼器的排序。清除“紅球”中繼器之前的排序規(guī)則(此處可以不需要，看個(gè)人喜好)；
4. 設(shè)置“random”、“value”、“1”元件值、給“1”元件添加顯示動(dòng)畫、“red”、添加“紅球”中繼器值、禁用“抽獎(jiǎng)”、“抽獎(jiǎng)”按鈕文字內(nèi)容以及添加“觸發(fā)事件”到“2”元件與第一次抽獎(jiǎng)是一樣的，此處就忽略了；
5. 隱藏“紅球”、“藍(lán)球”中繼器。因?yàn)樵诘谝淮纬楠?jiǎng)的時(shí)候，把這兩個(gè)中繼器顯示了，這里重新隱藏一下即可；

2、給“2”元件添加用例

（1）等待1s。讓兩次取球有一定的時(shí)間間隔，具體間隔時(shí)間長短可自行設(shè)計(jì)。當(dāng)然，也可以不設(shè)置，這樣就直接獲取所有的中獎(jiǎng)號(hào)碼；

（2）給“random”全局變量獲取一個(gè)隨機(jī)值，規(guī)則同上，這里就不贅述了。不同的地方是取值的方為不一樣了，因?yàn)樵谌〉玫谝粋€(gè)球之后，“red”的值已經(jīng)發(fā)生變化了(去掉了第一個(gè)球的內(nèi)容)，所以“red”的長度其實(shí)已經(jīng)變化了，所以“random”的取值也要跟著變化，不然就可能越界了，取不到值了。至于為什么是這樣取值的，大家可以思考一下；

（3）“value”、“2”元件、“red”等內(nèi)容的處理跟上面的是一樣的，所以就不做過多的說明了；

（4）添加“觸發(fā)事件”到“3”元件。跟上面的添加“觸發(fā)事件”到“2”是一樣的。

3、給“3”元件添加用例

除了“random”和添加“觸發(fā)事件”到“4”元件之外，其余的同上?！皉andom”設(shè)置如下：

4、給“4”元件添加用例

除了“random”和添加“觸發(fā)事件”到“5”元件之外，其余的同上?！皉andom”設(shè)置如下：

5、給“5”元件添加用例

除了“random”和添加“觸發(fā)事件”到“6”元件之外，其余的同上。“random”設(shè)置如下：

6、給“6”元件添加用例

（1）“random”設(shè)置如下：

（2）設(shè)置“red”值為初始值。因?yàn)榈酱藭r(shí)紅色球已經(jīng)取完了，用不到“red”這個(gè)變量了，所以這里先把它設(shè)置成初始值。還記得“red”的初始值吧？如果不記得就往前面翻翻看；

（3）添加“觸發(fā)事件”到“7”元件，其他都一樣；

7、給“7”元件添加用例

（1）相同的部分就不說了哈，自行參照上面的即可；

（2）“random”值設(shè)置如下，這里為什么是這樣的？因?yàn)椤癰lue”變量的值的長度是64嘛；

（3）“value”值設(shè)置如下(看清楚了哦，這里是用的“blue”哈，不要問我為什么，不然我會(huì)打你的，因?yàn)椤?”元件存放是藍(lán)色球啊~)；

（4）把藍(lán)球號(hào)碼添加到“藍(lán)球”中繼器中去；

（5）給紅色球排序。習(xí)慣性動(dòng)作，在排序之前先刪除移除所有的排序，不要糾結(jié)為什么了，習(xí)慣而已；

（6）至此，雙色球的7個(gè)號(hào)碼(6個(gè)紅色，1個(gè)藍(lán)色)都已經(jīng)取到了，那么我們想要重新抽獎(jiǎng)呢，肯定是要把“抽獎(jiǎng)”按鈕啟用啊，因?yàn)椴皇堑谝淮纬楠?jiǎng)了，所以可把“抽獎(jiǎng)”按鈕的文字內(nèi)容給重新定義一下嘛，這里就定義成“重新抽獎(jiǎng)”了；

（7）不光要把“抽獎(jiǎng)”按鈕給啟用了，還要把排序后的“紅球”中繼器和“藍(lán)球”中繼器顯示出來啊，不然怎么能算完事了呢（雙色球開獎(jiǎng)的紅色球號(hào)碼是有順序的哦）；

三、預(yù)覽

忙碌了現(xiàn)在了，如果看不到成果豈不是很傷心，所以，趕緊F5一下吧，看看自己的五百萬是不是已經(jīng)在路上了。當(dāng)然，你也可以根據(jù)自己開獎(jiǎng)的號(hào)碼去福彩中心兌獎(jiǎng)的了，前提是你要去彩票站買注雙色球，而且還要中獎(jiǎng)哦，不然會(huì)被打的，到時(shí)可別怨我哈。若要真的中獎(jiǎng)了，可別忘記了我。^_^

PS：如果有什么問題，或者有什么想要實(shí)現(xiàn)的小功能，大家可以給我留言，我們一起學(xué)習(xí)！

本文由 @無淚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。