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

預覽：

一、元件準備

1、添加兩個中繼器，分別用來存放雙色的紅球和藍球，取名為“紅球”和“藍球”，初始時隱藏；

1. 分別在中繼器中放入一個橢圓形的元件，其中把放入“紅球”中繼器的橢圓形元件的邊框設置成紅色，字體也設置成紅色；放入“藍球”中繼器的橢圓形元件的邊框設置成藍色，字體也設置成藍色；并分別給這兩個橢圓形元件命名為“紅球中獎號碼”和“藍球中獎號碼”；
2. 設置“紅球”中繼器的布局樣式為水平，并勾選“網格排布”，設置“每排項目數”為6(因為紅球數量為6個)。

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

• red：存放紅球的編號數值，我們都知道雙色球的紅色號碼是：01~33，這里我們就把這33個號碼存放到“red”這個全局變量中，全局變量的初始值我們這里設置成：<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>，至于為什么要這樣存放，這里先賣個關子，接著往下看就知道；
• blue：存放藍球的編號數值，雙色球的藍色號碼是：01~16，同“red”變量 一樣，這里把全局變量的初始值設置成：<01><02><03><04><05><06><07><08><09><10><11><12><13><14><15><16>；
• random：存放生成的隨機數，默認為為空，目的是截取“red”或“blue”變量內容的開始下標；
• value：獲取從變量“red”或“blue”中截取到的號碼，默認值為空。

3、添加7個橢圓形的元件，分別明明為“1”、“2”、“3”、“4”、“5”、“6”、“7”，用來存放開獎時隨機抽取的號碼，其中前6個為紅色球，最后一個為藍色球，并將這7個元件設置成隱藏；

4、最后，還需要一個按鈕，命名為“抽獎”，初始文字內容為“開始抽獎”；

至此，所有的元件已經添加完畢，當然你也可以添加幾個文字標簽，讓界面更加醒目，我這里偷個懶，就不加文字標簽了。

二、添加用例

1、首先給“抽獎”按鈕添加用例

“抽獎”按鈕有兩種情況：

• 第一次抽獎；
• 重新抽獎。

我們可以根據“抽獎”按鈕的文字內容去判斷是不是為第一次抽獎。

（1）如果“抽獎”按鈕的文字內容為“開始抽獎”，那么我們要執行以下用例：

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

• 為什么是這個范圍？因為“random”要跟“red”的長度去匹配，用于后續的截取“red”內的特定內容的開始位置，而“red”變量的初始值的長度就是132(下標是從0開始的，所以“red”標量的最大小標是131)；
• 為什么必須是4的倍數？因為我們在定義“red”變量的時候是通過<>區分每一個球的號碼的，且包括<>在內，每一個號碼的長度都是4；
• 怎么樣獲取這個數值？這里要用到數學函數里的隨機函數random()，因為Math.random()函數獲取的是0~1之間的小數，所以就需要通過特定的處理獲取0~132之間且為4的倍數的數字，通過Math.random()*99/3獲取0~33之間的數值，然后通過數學函數Math.floor()向下取整數，這樣就能取到0~32之間的全部整數，且包括0和32，然后再誠意4，就能取得0~132之間所有4的倍數的數值(包括0，不包括132)；

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

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

4）顯示“1”。給“1”添加一個動畫，這樣更直觀一些，我這里添加了一個“向右翻轉”的一個動畫，時間是1s，大家可以根據自己喜好自行設計；

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

6）添加“紅球”中繼器。這一步的目的是為了后續生成中獎號碼排序用的。因為在axure中，貌似只能在中繼器紅可以排序(雙色球開獎時的號碼是隨機的，開獎過程中并不是按大小出來號碼的，而是在中獎號碼全部出來之后才按照大小排序的)。我們把“1”元件的文字內容添加到“紅球”中繼器中備用；

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

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

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

1. 隱藏“1”、“2”、“3”、“4”、“5”、“6”、“7”元件。如果不是第一次抽獎，那么這7個元件是顯示狀態的，所以在點擊“抽獎”按鈕是，首先要把這7個元件設置為隱藏狀態；
2. 刪除“紅球”、“藍球”中繼器中的數據。清除之前抽獎的數據；
3. 移除“紅球”中繼器的排序。清除“紅球”中繼器之前的排序規則(此處可以不需要，看個人喜好)；
4. 設置“random”、“value”、“1”元件值、給“1”元件添加顯示動畫、“red”、添加“紅球”中繼器值、禁用“抽獎”、“抽獎”按鈕文字內容以及添加“觸發事件”到“2”元件與第一次抽獎是一樣的，此處就忽略了；
5. 隱藏“紅球”、“藍球”中繼器。因為在第一次抽獎的時候，把這兩個中繼器顯示了，這里重新隱藏一下即可；

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

（1）等待1s。讓兩次取球有一定的時間間隔，具體間隔時間長短可自行設計。當然，也可以不設置，這樣就直接獲取所有的中獎號碼；

（2）給“random”全局變量獲取一個隨機值，規則同上，這里就不贅述了。不同的地方是取值的方為不一樣了，因為在取得第一個球之后，“red”的值已經發生變化了(去掉了第一個球的內容)，所以“red”的長度其實已經變化了，所以“random”的取值也要跟著變化，不然就可能越界了，取不到值了。至于為什么是這樣取值的，大家可以思考一下；

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

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

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

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

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

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

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

除了“random”和添加“觸發事件”到“6”元件之外，其余的同上?！皉andom”設置如下：

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

（1）“random”設置如下：

（2）設置“red”值為初始值。因為到此時紅色球已經取完了，用不到“red”這個變量了，所以這里先把它設置成初始值。還記得“red”的初始值吧？如果不記得就往前面翻翻看；

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

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

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

（2）“random”值設置如下，這里為什么是這樣的？因為“blue”變量的值的長度是64嘛；

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

（4）把藍球號碼添加到“藍球”中繼器中去；

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

（6）至此，雙色球的7個號碼(6個紅色，1個藍色)都已經取到了，那么我們想要重新抽獎呢，肯定是要把“抽獎”按鈕啟用啊，因為不是第一次抽獎了，所以可把“抽獎”按鈕的文字內容給重新定義一下嘛，這里就定義成“重新抽獎”了；

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

三、預覽

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

PS：如果有什么問題，或者有什么想要實現的小功能，大家可以給我留言，我們一起學習！

本文由 @無淚 原創發布于人人都是產品經理。未經許可，禁止轉載。